Adarsh Srivastava
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by Adarsh Srivastava
-
-
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.
-
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. -
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 thisworksTimeline.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, }, });
See the Pen ExQqXJj by adarshsrivastava01 (@adarshsrivastava01) on CodePen
ScrollTrigger Timeline no callbacks
in GSAP
Posted
Hey @mvaneijgen thanks a lot for the help. I finally figured out the effect I wanted to achieve.