ScrollTrigger Timeline no callbacks

[Adarsh Srivastava 0 Likes (Newbie)]

Hey Greensock Community 👋,

 

So I have trying to make a animation based on scroll using ScrollTrigger.

The desired animation is: 

1. On the scroll the section with class `layers_section` pins to the screen.
2. On Further scroll the element with class `first_layer` scales from 0.5 to 1.01.
3. then the element with class `second_layer`, `left_info` and `left_card` translates from y=100 to y=0 but the issue is as I am using a single timeline with single section pinned while creating the timeline object and defining scrollTrigger object inside it I am unable to access callbacks like `onEnterBack`, `onLeave` and I need these utitlities to continue.

 

Is there any way I can get those callbacks.

 

Adding the code where I created the timeline object as well as the codepen link too.

 

Looking forward for the solution to the problem.

 

const worksTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".layers_section",
        markers: true,
        start: "top top",
        end: "+=6000px",
        scrub: true,
        pin: true,
   },
});

 

See the Pen ExQqXJj by adarshsrivastava01 (@adarshsrivastava01) on CodePen

[mvaneijgen 1,284 Likes (Superhero)]

Hi @Adarsh Srivastava welcome to the forum!

 

ScrollTrigger just animates a timeline, so remove ScrollTrigger and just focus on the animation at hand. Only when you think the animation is perfect introduce ScrollTrigger back.

 

I removed the first html block, disabled ScrollTrigger and GSDevTools to get a handy debugging tool to easily scrub through the animation. Having your animation play this way, do you find that it is doing what you want? If not, just fix them first and only when they are correct enable ScrollTrigger again. 

 

There were no `onEnterBack` and `onLeave` callbacks in your code, so I don't know what you want with them, here are the docs on those https://greensock.com/docs/v3/Plugins/ScrollTrigger 

 

See the Pen MWQNOyB?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[Adarsh Srivastava 0 Likes (Newbie)]

Hey @mvaneijgen thanks for the quick reply.
So the problem I'm facing is that I need those callbacks like `onLeave`, `onLeaveBack` because I will be creating three boxes which would be changing their background color on the start and end of each individual animation, an example of which could go like this

 

worksTimeline.fromTo(
     ".info_right",
     { opacity: 0, translateY: "100px" },
     { opacity: 1, translateY: 0 },
     "rightAnimation"
)

So I need these callbacks in the to object of this timeline.

[mvaneijgen 1,284 Likes (Superhero)]

8 hours ago, Adarsh Srivastava said:

on the start and end of each individual animation

Then why not add them to the timeline? If they are on the timeline they will always be insync. 
 

8 hours ago, Adarsh Srivastava said:

I will be creating three boxes which would be changing their background color

The code you show has nothing to do with changing the backgroundColor, so I'm lost at what this should do. Please add it to a minimal demo.

 

I have the feeling you're overcomplicating things, it is not to be mean, but things are rarely complicated using GSAP.

 

I would recommend just building the timeline (quick and dirty), just with the knowledge that you have right now and then come back with the question: at second XX I want the animation to ... but it is doing ...

 

Right now I  don't know what you are trying to do, so I can't see what is wrong.

[Adarsh Srivastava 0 Likes (Newbie)]

10 minutes ago, mvaneijgen said:

Then why not add them to the timeline? If they are on the timeline they will always be insync. 

Hey @mvaneijgen

 

But In the timeline where I am using timeline.fromTo(ref.current, fromObject, toObject) is it possible to have those callbacks e.g. onLeave, onEnterBack, onLeaveBack etc. I think they are only available in scrollTriggerObject. 

[Adarsh Srivastava 0 Likes (Newbie)]

I've created a very basic timeline here in the codepen 

See the Pen yLvmdOj by adarshsrivastava01 (@adarshsrivastava01) on CodePen

so In this Animation I want to control the timeline using scroll and I want the scroll animation to start when the section with class `section2` gets pinned i.e. a simple scrollTriggerObject could be this.
 

const animationTimeline = gsap.timeline({
    scrollTrigger: {
        trigger: ".section2",
        markers: true,
        start: "top top",
        end: "+=6000px",
        scrub: true,
        pin: true,
   },
});

 

but at the same time for all these .fromTo function calls I want that when the animation for first box runs i.e. the block with class `box1` I want to change the background color of box with class `change1` to red, when the animation for second block runs i.e. the block with class `box2` I want to change the background color of box with class `change2` to red and change the background color of box with class `change1` to as before.

[mvaneijgen 1,284 Likes (Superhero)]

You can use the following callbacks "onComplete", "onUpdate", "onStart", "onReverseComplete", "onInterrupt", or "onRepeat"

 

https://greensock.com/docs/v3/GSAP/Tween/eventCallback()

 

I've add an alert to one of the last fromTo's as an example

 

See the Pen RwQXzZR by mvaneijgen (@mvaneijgen) on CodePen

[mvaneijgen 1,284 Likes (Superhero)]

24 minutes ago, Adarsh Srivastava said:

the block with class `box1` I want to change the background color of box with class `change1` to red,

 

tl.to('.box1', { some Animation}, 'sameTime')
tl.to('.change1', { backgroundColor: 'red' }, 'sameTime')

 that's all you need.

 

Please make a full minimal demo. All the demos you post do have an animation. An you talk about changing background colors but nothing changes colors in your demo

[Adarsh Srivastava 0 Likes (Newbie)]

Hey @mvaneijgen thanks a lot for the help. I finally figured out the effect I wanted to achieve.

[mvaneijgen 1,284 Likes (Superhero)]

If you can please post what you have now. Not only so I know what you where looking for, but so when anyone comes here with a Google search.