Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alal111

Animate one element with multiple scrollTrigger tweens

Go to solution Solved by akapowl,

Recommended Posts

I want very simple thing, big red div on one scroll goes to little red div, at second scroll it goes to green one, cannot really understand how to achieve it, please help, 

See the Pen Vwpqdgw by alexanderbredun (@alexanderbredun) on CodePen

Link to comment
Share on other sites

You made all right, but "start" has only "top center bottom". And your start and end were wrong

See the Pen XWMoxNZ by makssshow (@makssshow) on CodePen

  • Like 3
Link to comment
Share on other sites

14 hours ago, Makssshow said:

You made all right, but "start" has only "top center bottom". And your start and end were wrong

 

 

thanks for reply, but i need a little bit different, when i scroll once big red moves to little red immediately, when i scroll one move time it moves to green little 

Link to comment
Share on other sites

 

Remove "scrub" and create one more scroll trigger for second animation

Link to comment
Share on other sites

9 minutes ago, Makssshow said:

 

Remove "scrub" and create one more scroll trigger for second animation

thanks, it works almost how i want but it doesnt move back when i scroll up if i remove 'scrub' and it move smoothly to first point and not smoothly to second can u help why?

 

See the Pen Vwpqdgw by alexanderbredun (@alexanderbredun) on CodePen

Link to comment
Share on other sites

  • Solution

Hey @alal111

 

You can easily control how to play non-scrubbing tweens/timelines attached to a ScrollTrigger with toggleActions

 

toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

...from the ScrollTrigger docs.

 

 

Having ScrollTriggers set up on individual tweens of a timeline (as you have in your latest pen) is one of the most common ScrollTrigger mistakes btw. Since you want your individual animations to trigger in different spots you would have to set up different ScrollTriggers for each of those animations. 

 

And since you are tweening on the same properties of the same element multiple times, you will want to set immediateRender: false to any later tweens on those properties of that element (not doing so is another one of the most common ScrollTrigger mistakes).

 

That could maybe look something like this

 

See the Pen c33cc0add79c843451596c45f4047bc3 by akapowl (@akapowl) on CodePen

 

 

 

I also used a fromTo tween for the second ScrollTrigger here to make sure it tweens from the first little rect to the second every time and it works fine, when you scroll slowly. The problem is though, since the distance between those ScrollTriggers is not really the biggest, if you scroll fast enough, you will see some jumping - which is to be expected as you would have the second ScrollTrigger take control over tweening the element when the first tween maybe isn't even finished.

 

That is a general problem with time-based animations (on the same element) triggered on scroll (in different places) which there is not really a solution for - except if you would consider blocking the scroll for the user for a certain time - but then again that would be a very bad user experience. So actually you might want to consider re-thinking how you want things to be played here - unless somebody has an obvious solution to that, that I just didn't think of.

 

 

  • Like 3
  • Thanks 2
Link to comment
Share on other sites

36 minutes ago, akapowl said:

Hey @alal111

 

You can easily control how to play non-scrubbing tweens/timelines attached to a ScrollTrigger with toggleActions

 

toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

...from the ScrollTrigger docs.

 

 

Having ScrollTriggers set up on individual tweens of a timeline (as you have in your latest pen) is one of the most common ScrollTrigger mistakes btw. Since you want your individual animations to trigger in different spots you would have to set up different ScrollTriggers for each of those animations. 

 

And since you are tweening on the same properties of the same element multiple times, you will want to set immediateRender: false to any later tweens on those properties of that element (not doing so is another one of the most common ScrollTrigger mistakes).

 

That could maybe look something like this

 

 

 

 

 

 

I also used a fromTo tween for the second ScrollTrigger here to make sure it tweens from the first little rect to the second every time and it works fine, when you scroll slowly. The problem is though, since the distance between those ScrollTriggers is not really the biggest, if you scroll fast enough, you will see some jumping - which is to be expected as you would have the second ScrollTrigger take control over tweening the element when the first tween maybe isn't even finished.

 

That is a general problem with time-based animations (on the same element) triggered on scroll (in different places) which there is not really a solution for - except if you would consider blocking the scroll for the user for a certain time - but then again that would be a very bad user experience. So actually you might want to consider re-thinking how you want things to be played here - unless somebody has an obvious solution to that, that I just didn't think of.

 

 

Thank you very much, you are the best! it works exactly how i wanted

  • Like 1
Link to comment
Share on other sites

1 hour ago, akapowl said:

Hey @alal111

 

You can easily control how to play non-scrubbing tweens/timelines attached to a ScrollTrigger with toggleActions

 

toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none".

 

...from the ScrollTrigger docs.

 

 

Having ScrollTriggers set up on individual tweens of a timeline (as you have in your latest pen) is one of the most common ScrollTrigger mistakes btw. Since you want your individual animations to trigger in different spots you would have to set up different ScrollTriggers for each of those animations. 

 

And since you are tweening on the same properties of the same element multiple times, you will want to set immediateRender: false to any later tweens on those properties of that element (not doing so is another one of the most common ScrollTrigger mistakes).

 

That could maybe look something like this

 

 

 

 

 

 

I also used a fromTo tween for the second ScrollTrigger here to make sure it tweens from the first little rect to the second every time and it works fine, when you scroll slowly. The problem is though, since the distance between those ScrollTriggers is not really the biggest, if you scroll fast enough, you will see some jumping - which is to be expected as you would have the second ScrollTrigger take control over tweening the element when the first tween maybe isn't even finished.

 

That is a general problem with time-based animations (on the same element) triggered on scroll (in different places) which there is not really a solution for - except if you would consider blocking the scroll for the user for a certain time - but then again that would be a very bad user experience. So actually you might want to consider re-thinking how you want things to be played here - unless somebody has an obvious solution to that, that I just didn't think of.

 

 

i have one more question what to do if i want my first point be higher then center of window? if i do it now it jumps to first point without scroll

Link to comment
Share on other sites

gsap.registerPlugin(ScrollTrigger);

const rectPoint1 = document.querySelector('.point1').getBoundingClientRect();

const rectPoint2 = document.querySelector('.point2').getBoundingClientRect();

 

 

 

gsap.to('.div1', {

  

  y: rectPoint1.y,

  x: rectPoint1.x,

 

  scrollTrigger: {

    trigger: ".point1",

    start: "top 30%",

    end: "bottom 30%",

    toggleActions: "play none reverse none",

    markers: true,

  }

  

})

 

 

 

gsap.fromTo('.div1', {

  

  y: rectPoint1.y,

  x: rectPoint1.x,

  

}, {  

  

  y: rectPoint2.y,

  x: rectPoint2.x,

  immediateRender: false,

  

  scrollTrigger: {

    trigger: ".point2",

Link to comment
Share on other sites

53 minutes ago, alal111 said:

i have one more question what to do if i want my first point be higher then center of window? if i do it now it jumps to first point without scroll

 

Sorry, I'm not sure, I understand.

 

Do you want the animation to trigger when the trigger element hits the top of the window?

Then you'd likely want to set the second parameter of start and end (probably best of both ScrollTriggers or you will likely run into conflicting tweens) to top.

 

The first parameter of start and end always refers to the trigger element, the second always refers to the viewport/window.

So if for example your trigger-element is .point1 and you set start to 'top top' it will enter/trigger when the top of.point1 wil hit the top of the window.

 

You can also use absolute values or percentages in there - like 10% e.g. would be 10% from the top of the window/element.

 

  • Like 2
Link to comment
Share on other sites

Thanks for these really thorough explanations Paul. You're such an asset to these forums.  ☺️

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Happy to help - that's what this forum is about.

Thanks for those kind words, Cassie  :)

  • Like 1
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.

×