Jump to content
Search Community

Controlling animation duration while scrolling and responsive behaviour

italoborges test
Moderator Tag

Go to solution Solved by GreenSock,

Recommended Posts

Hello all! 🙂


I'm struggling to understand some concepts of GSAP (Timeline) and ScrollTrigger.

I have a simple animation like a door opening and closing when the user scrolls down.


There will be a content for each section behind these doors.
So, regarding this I have 2 main questions:


1. Slowing down the scroll

If I need to go through each section slower then it is right now, should I increase the height of the section? Not the duration of the tween?


2. Responsiveness

I added some media queries that will change the size of the content text.

If the size of the window changes, there is a bug.
The animation doesn't respect the new size/position and I can't figure out why 🥲


Thank you!!! 🥳


PS: I don't know why but in the embed CodePen, the LocomotiveScroll seems not to be working. 



See the Pen KKvBWJr by italoborges (@italoborges) on CodePen

Edited by italoborges
Adding codepen example and refining my question.
Link to comment
Share on other sites

Hey there! We can usually help more effectively if you provide a minimal demo, codepen is great for this.

Without seeing how you demo is set up I can only offer a guess.

If you're pinning the container you can move the end value further down the page using 'end'

scrollTrigger: {
  trigger: ".container",
  pin: true,   // pin the trigger element while active
  start: "top top", // when the top of the trigger hits the top of the viewport
  end: "+=2000", // end after scrolling 2000px beyond the start
  scrub: 1, // smooth scrubbing, takes 1 second to "catch up" to the scrollbar

Hope this helps!

  • Thanks 1
Link to comment
Share on other sites

  • italoborges changed the title to Controlling animation duration while scrolling and responsive behaviour
  • Solution

If I'm understanding your question correctly, it's just a logic issue in your code - you're setting up .to() tweens that invalidate on refresh, right? So .to() tweens always use the CURRENT value as the "from" (starting) values, so if you scroll down past that tween and ANOTHER tween has affected it (that's what you're doing) and then you resize such that it invalidates and re-records its starting values, it'll use whatever those values are at that point which are likely not 0. 


To force it to use 0 as the starting value of your tween(s), you can just use a .fromTo() tween instead, like: 

See the Pen bGrjRbb?editors=0010 by GreenSock (@GreenSock) on CodePen


I also noticed you used a px-based value in one tween, and a %-based value on the same property in another. That's generally not a good idea - if you want to use percentage-based values on x or y, always use xPercent and yPercent. It's quite convenient, actually, because that allows you to layer percent-based transforms on top of regular ones for advanced effects, like centering and element and moving, like xPercent: -50, yPercent: -50, x: 100, y: 200 for example. 


And yes, if you want to increase the amount of scrolling it takes to move through scrubbed ScrollTrigger animation, you can adjust your end value or the height of your sections. See https://greensock.com/docs/v3/Plugins/ScrollTrigger#scrub

  • Thanks 1
Link to comment
Share on other sites

Thank you for clarify the problems I had there! I understood the use of the fromTo!

About the percentage, I missed that one after a refactor, thanks for pointing that out. 🙂


Another question regarding the tween. If I need to repeat this animation (opening and closing) for other sections, let's say this has to happen for all other sections... is that a way to re-use the same timeline or because we have a different scrollTrigger it's not possible?


Thank you @GreenSock😀



Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...