Adarsh Srivastava

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

I've created a very basic timeline here in the codepen https://codepen.io/adarshsrivastava01/pen/yLvmdOj 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.

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.

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.

Hey Greensock Community ?, So I have trying to make a animation based on scroll using ScrollTrigger. The desired animation is: On the scroll the section with class `layers_section` pins to the screen. On Further scroll the element with class `first_layer` scales from 0.5 to 1.01. 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, }, });