GSAP3 ScrollTrigger - Single Element - Chain animations and sequence (time them) one after the other + Scrub

[kubik101]

Please refer to the codepen and then third slide/section in the horizontal scroller.

I have placed the comments "attempting to move c3 from top left to top right, then top right to bottom right" in both the JS and HTML so you know the area to focus on.

 

Q). How would you move an object from: top left, to: top right, then from: top right, to: bottom right.

 

What I am trying to understand and learn is how to chain animations (if that is the right term) and sequence (time them) one after the other, all while scrub is enabled.

 

Thank you.

😃

See the Pen yLEmJor by kubik101 (@kubik101) on CodePen

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? It's fine if it doesn't totally work. We just need a little context to understand what you mean. Like...is the thing you want to move like that supposed to be position: fixed and it's moving to the various corners of the viewport while you scroll? Or inside something else, position: absolute? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best (avoid frameworks if possible). See if you can recreate the issue with as few dependancies as possible.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. 

[Cassie]

Hi again! I see what you're trying to do.

This isn't really about sequencing and chaining - you've got that right so far. This is getting more into math territory. You want to move the box to fixed positions on the screen but the box is also housed inside a moving container that's going to impact it's position.

Maybe roughly something like this? You'll need to have a play around and work out the exact percentages

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

 

[kubik101]

Hi Cassie.

 

Thanks for your response.

 

"This isn't really about sequencing and chaining"
- Sorry I don't know the right terminology at times so may have been using the wrong words to explain what I was after.

 

The issue I was needing to resolve was the knowing how to "string together" multiple points (x or y etc) on the one element in a single timeline.

 

So it wasn't about the math in this case as you refer to it, it was me not knowing how to put in the extra .to 's to the timeline (example code below).

 

tl.to('.st--block-c3', {
    ease: 'none',
    y: () =>
        -document.querySelector('.st--section-c3').offsetHeight +
        document.querySelector('.st--block-c3').offsetHeight,
})
    .to('.st--block-c3', {
        ease: 'none',
        x: () =>
            document.querySelector('.st--section-c3').offsetWidth -
            document.querySelector('.st--block-c3').offsetWidth,
    })
    .to('.st--block-c3', {
        ease: 'none',
        y: () => 0,
    })
    .to('.st--block-c3', {
        ease: 'none',
        x: () =>
            document.querySelector('.st--section-c3').offsetWidth * 0.5 -
            document.querySelector('.st--block-c3').offsetWidth,
    })

 

You also made mention:

"You want to move the box to fixed positions on the screen but the box is also housed inside a moving container that's going to impact it's position."

 

This is not as arbitrary as you think, in the case of horizontal scroll you include this on all your timelines within the horizontal section(s).

 

containerAnimation: scrollTween, 

Search for "containerAnimation" in the following link:

https://greensock.com/docs/v3/Plugins/ScrollTrigger

 

I have updated my codePen to include the solution.

 

Thanks to everyone's help the pen is stable and working as expected (except some code is probably long winded as I am no JS expert and I am still in the early days of learning GSAP3).