How to relocate an element on scroll using GSAP! No plugins

[Faith Akakpo]

I saw this codepen where when you scroll down on a page the 3D picture moves with the page as it scrolls down. It also grows and rotates depending on which section in. I Copied the code and change it so it would work on a div element in html. When I tried it, the div would only move in the first section, not the rest. How would I be able to move a div element along the page as I scroll to the bottom, the EXACT way as the codepen below? This code does not use the motion path plugin only the scroll Trigger plugin which is okay since its free.

 

The animation I want:

See the Pen ZEZozJN by faisy227 (@faisy227) on CodePen

 

The animation I made: 

See the Pen wvZRjVY by faisy227 (@faisy227) on CodePen

 

See the Pen ZEZozJN by faisy227 (@faisy227) on CodePen

[GreenSock]

I noticed two problems:

1. You nested ScrollTriggers inside a timeline. That's logically impossible to accommodate - the playhead of a tween can't be controlled by BOTH a timeline's playhead AND the scroll position simultaneously. 
2. You've got multiple tweens of the same element controlled by ScrollTriggers. By default, animations with ScrollTriggers are rendered immediately. So in your case, you just need to set the 2nd and 3rd to immediateRender: false so that they don't step on each other. 

Is this what you're looking for?:

See the Pen QWPzBXO?editors=1010 by GreenSock (@GreenSock) on CodePen

 

And alternative might be to create a timeline that has ONE ScrollTrigger applied to the timeline itself (not nested ones), and have all your animations in there. That'd assume you can just make that one timeline span across the entire scroll area that you need. If not, then just stick with the individual tweens. 

 

I hope that helps. 

[Faith Akakpo]

Yes this is what I was looking for!!! I never knew about the immediateRender: false!

 

Just one question: you removed toggleActions, but As I scroll back it it moves in reverse, why?

 

Thanks for solving my problem!

[Rodrigo]

Hi,

6 hours ago, Faith Akakpo said:

Just one question: you removed toggleActions, but As I scroll back it it moves in reverse, why?

In your original demo you had both toggleActions and scrub in your ScrollTrigger configuration. It has to be one or the other, but definitely not both, since they pretty much don't work together. From the ScrollTrigger docs:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object

 

scrub
Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following
Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress.
Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out.

 

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".

 

I'd assume that Jack picked scrub over toggleActions, since your demo was scrubbing, but most definitely I can't read his mind! 😉

 

Hopefully this clear things up.

Happy Twening!