{"action":"opened","issue":{"url":"https://api.github.com/repos/Adfero/jScrollability/issues/2","repository_url":"https://api.github.com/repos/Adfero/jScrollability","labels_url":"https://api.github.com/repos/Adfero/jScrollability/issues/2/labels{/name}","comments_url":"https://api.github.com/repos/Adfero/jScrollability/issues/2/comments","events_url":"https://api.github.com/repos/Adfero/jScrollability/issues/2/events","html_url":"https://github.com/Adfero/jScrollability/issues/2","id":144885930,"number":2,"title":"Section based animations","user":{"login":"yckart","id":529130,"avatar_url":"https://avatars.githubusercontent.com/u/529130?v=3","gravatar_id":"","url":"https://api.github.com/users/yckart","html_url":"https://github.com/yckart","followers_url":"https://api.github.com/users/yckart/followers","following_url":"https://api.github.com/users/yckart/following{/other_user}","gists_url":"https://api.github.com/users/yckart/gists{/gist_id}","starred_url":"https://api.github.com/users/yckart/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/yckart/subscriptions","organizations_url":"https://api.github.com/users/yckart/orgs","repos_url":"https://api.github.com/users/yckart/repos","events_url":"https://api.github.com/users/yckart/events{/privacy}","received_events_url":"https://api.github.com/users/yckart/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2016-03-31T12:31:32Z","updated_at":"2016-03-31T12:31:32Z","closed_at":null,"body":"Would nice to be able to define sections in which we could define their children. If a percentage `start` / `end` is given, it would be relative to the `range` defined in its sections.\r\n\r\n```js\r\n$.jScrollability([{\r\n  'section': '.section-1',\r\n  'range': [0, 1000],\r\n  'rules': [{\r\n    'selector': '.section-title',\r\n    'start': '0%',\r\n    'end': '50%',\r\n    'fn': function($el, pcnt) {\r\n      $el.css({\r\n        'left': ((1 - pcnt) * 100) + '%'\r\n      });\r\n    }\r\n  }, {\r\n    'selector': '.section-body',\r\n    'start': '25%',\r\n    'end': '100%',\r\n    'fn': function($el, pcnt) {\r\n      $el.css({\r\n        'opacity': pcnt\r\n      });\r\n    }\r\n  }],\r\n}, {\r\n  'selector': '.reveal-demo',\r\n  'start': 1800,\r\n  'trigger': true,\r\n  'duration': 3000,\r\n  'fn': function($el, pcnt) {\r\n    $el.css({\r\n      'top': (20 + ((1 - pcnt) * 60)) + '%'\r\n    });\r\n  }\r\n}\r\n}])\r\n```"}}