en en en en en en en en en en en en en en en en en en fa en en fr hbs_lat en en en es en en en ms en de en fr en en en ca en en en en en en en en ms en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en sv en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en en ms en en fr en it en eu en pl en hu en de en pt en en en de en en en en en en en fr cv es tr es en en en en ms en en en en en en fr en hbs_lat en en en en en en en fr cv es tr es en en en en de en en en ca en en en en en
What am I doing wrong?
Is there a better way to do this?
All the paragraph tags are invisible at start and once each enters the viewport, it becomes visible.
This is the codepen url:
See the Pen KKQOgBp by moonIMD (@moonIMD) on CodePen
See the Pen ZErgBze?editors=0110 by GreenSock (@GreenSock) on CodePen
Just want to show some screenshots of what I mean on the resizing issue.
Please find 2 screenshots attached.
before-resizing.PNG (screenshot #1)- In this screenshot, the markers are in the correct position
after-resizing.PNG (screenshot #2)- In this screenshot, I have scrolled down to a couple of years, then resized the browser, then scrolled back up to the first year. The markers are in the wrong position.
Share on other sites
GreenSock    17,226 Likes (Superhero)
I noticed a few problems:
You're using CSS transitions on many things. Those can cause problems. Imagine you resize the window and ScrollTrigger is trying to do its measurements to mark the proper start/end points but the CSS transitions are interfering, not allowing the elements to render in their final positions. I would avoid CSS transitions, at least in a scenario like this.
You are directly setting style.marginTop on various things which probably messes up measurements and positioning when refreshing. If you're going to do that, you should set up an onRefreshInit that resets those values. Remember, in order for ScrollTrigger to do its magic, it basically has to tear down any pinning and roll back any changes it made, then start measuring things and applying the ScrollTriggers top-to-bottom (because the higher ones can affect the position of the lower ones). So if you're altering CSS styles that affect flow, you need to manage those properly.
Share on other sites
moonIMD    0 Likes (Newbie)
1. I will try to use the gsap tween to re-create the animations.
2. To have the 'timeline_container' div animate up and down once it enter or leave the active section, should I not being 'setting style.marginTop' and use gsap tweens (such as gsap.to() gsap.from()) instead. As well, am I correct of animating the 'timeline_container' in the onEnter & onLeaveBack functions?
Share on other sites
GreenSock    17,226 Likes (Superhero)
Here's a different approach that simplifies various aspects:
See the Pen dydxgaB?editors=0010 by GreenSock (@GreenSock) on CodePen
It sets up the trigger start/end evenly based on wherever the parent_container's ScrollTrigger starts pinning. This way, we don't even need to worry about reverting other animations that may have shifted the trigger elements around.
Uses GSAP to dynamically tween things. No CSS transitions (though you probably could switch back to CSS transitions for at least some of this if you prefer now that it uses the strategy mentioned in #1 for positioning).
Uses transforms instead of marginTop in order to boost performance (marginTop affects layout which is bad for browser rendering performance)
We normally don't rework projects like this for people, but I wanted to spend some extra time to get you on your way. Maybe it'll help someone else in the future too.
Share on other sites
moonIMD    0 Likes (Newbie)
Thank you so much for you help on this! It's looking great and it makes sense!
I am just going through your code trying to understand the 'onLeaveBack: () => i || goto(null, 0)'
This onLeaveBack is a function when the scroll position moves backward. The 'i' is the index of the section and is it passing that 'i' to the goto()?
But it also has this '||' (OR), so I don't quite understand what this line is doing.
Thanks again for your help!
Share on other sites
GreenSock    17,226 Likes (Superhero)
11 minutes ago, moonIMD said:
This onLeaveBack is a function when the scroll position moves backward. The 'i' is the index of the section and is it passing that 'i' to the goto()?
But it also has this '||' (OR), so I don't quite understand what this line is doing.
These are identical functionally:
onLeaveBack: () => i || goto(null, 0) // same: onLeaveBack: () => { if (i === 0) { // only do this on the FIRST element when leaving in reverse goto(null, 0) } }
Does that clear things up?
Share on other sites
moonIMD    0 Likes (Newbie)
Thank you! Yes, it makes sense!
Share on other sites
Create an account or sign in to comment
You need to be a member in order to leave a comment
Sign up for a new account in our community. It's easy!
Register a new account
Already have an account? Sign in here.
Sign in to follow this   Followers 2
Go to topic listing
Recently Browsing   0 members
No registered users viewing this page.
GSAP Scrolltrigger Vertical Timeline
“Any time I've struggled to achieve a complex animation in CSS alone, I've never regretted using @greensock 's GSAP. After all these years, and impressive competitors, it's still Best In Class.”
“The best thing about GSAP is that it just works, and it works well. On every single browser I’ve tested.”
“Sincerely, the people behind GSAP are sorcerers”
“GSAP is just miles and miles ahead of any animation library out there. Great work!”
“Spent today converting an animation to pure CSS, and then into GSAP. GreenSock was an order of magnitude easier. Love it.”
“@greensock it’s a great library that many people love, and I know you care deeply about performance :)”
“Massive shoutout to GreenSock for having an amazing product with fantastic documentation, hugely talented support staff and an active and helpful community. If you do anything with web animation you should *definitely* be using them.”
“Really quite impressed with @GreenSock JS - even the small things.”
“I can definitely say ever since I started using GSAP, my work exponentially improved. It basically changed my life.”
Sign Up For Our Newsletter
Get the latest updates on GreenSock products, exclusive offers, and more right in your inbox.
Your information will always be kept confidential.
Thanks for signing up!
Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.