Its_Lefty Posted March 7, 2020 Share Posted March 7, 2020 Hi there! I'm working on creating an animated timeline. At first I was using the Intersection Observer only but I've just added GSAP in order to have more control of the animations. Below you can see my attempt. The issue is that the viewport is being ignored, all animations fire although they are not in the viewport I have set a threshold of 1 but it looks like it is not helping. What is the issue here? Thanks for any help! edit: New CodePen below Link to comment Share on other sites More sharing options...
mikel Posted March 8, 2020 Share Posted March 8, 2020 Hey @Its_Lefty, Most importantly: Don't mix css transforms with js. Let GSAP do the job. And check the intersection tutorial See the Pen JjdOmZg by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 7 Link to comment Share on other sites More sharing options...
Its_Lefty Posted March 8, 2020 Author Share Posted March 8, 2020 Wow, thanks a lot! Especially with the animating border height. I was also planning to add this after fixing my issue. So I guess my mistake was not using the timeline options at all, I need to get a closer look into the docs. Unfortunately there is no more staggering of the items, if you see multiple sections at once in the viewport. Is this possible or do I need something like ScrollMagic for that? Link to comment Share on other sites More sharing options...
mikel Posted March 8, 2020 Share Posted March 8, 2020 Hey @Its_Lefty, For the demo (low height) the section height is only 400px, therefore the second section is already in the viewport at great heights. It is up to you to change the height of the sections or set a higher threshold (target 'section' should be 60% visible and animation should run). Play with this parameter and test different version. Happy playing ... Mikel 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted March 8, 2020 Share Posted March 8, 2020 Alternatively, you could create a timeline with all the animations with labels between each section and then use .tweenFromTo() based on the section that's been intersected. That way it will play it sequentially if both are in view. Link to comment Share on other sites More sharing options...
Its_Lefty Posted March 15, 2020 Author Share Posted March 15, 2020 @mikel Thanks. I've tested it by forking your pen and setting a higher threshold but it won't help if multiple elements are in view. The animations all start at the same time. Unfortunately maxing up the heights of the sections is not an option. So I guess I need to use the tweenFromTo option like @ZachSaucier suggested. I've tried using it by forking mikels pen, see my result: See the Pen yLNjONN by ItsLefty (@ItsLefty) on CodePen There is something wrong but I don't know the issue. Thanks for any help! Link to comment Share on other sites More sharing options...
mikel Posted March 15, 2020 Share Posted March 15, 2020 Hey @Its_Lefty, you could use rootMargin - for example var options = { threshold: 0.2, // target 'section' should be 20% visible rootMargin: '0px 0px -50% 0px' // above half of windowHeight }; This option doesn´t work in a CodePen ( why ??). Tested on my computer - works / looks great. You could usa a rootMargin only, without threshold. Stay healthy ... Mikel 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now