yeisonvelez11

I am somewhat new to this, and I want to know please how can I get the scrollbar position where the pin starts and ends, I need to get this data before firing the scrolltrigger event. this is my live code: gsap.registerPlugin(ScrollTrigger); ScrollTrigger.defaults({ toggleActions: "restart pause resume none", // markers: true, }); let tl = gsap.timeline({ scrollTrigger: { start: "top top", end: "200% top", trigger: ".container", toggleActions: "restart none reverse none", markers: true, scrub: true, pin:true }, }); http://plnkr.co/edit/9r2cT9sJV3mqkeDy?open=lib%2Fscript.js

I have a timeline with several tween. That's why I need to achieve it for a specific tween

this not works for me... http://plnkr.co/edit/ZBtrFiFuipV2Kr5w?open=lib%2Fscript.js

@ZachSaucier excuse my ignorance, I hardly get used to this great library, but I don't understand how what you say can help me capture an onReverse event or similar

thanks for your help,I have seen the links, but in my case I need to fire a function when something like onReverse triggers...

I know these events: onReverseComplete, onStart, onComplete but I need to know some way to detect when a tween becomes active once its transition has finished but it is accessed again from behind (something like onReverse) it would be something like the onStart but vice versa is this possible? tl.from("#square", { autoAlpha: 0, scale: 4, duration: 3, onStart: function () { console.log("onStart"); }, onReverseComplete: () => { console.log("onverserComplete"); }, onComplete: () => { console.log("onComplete"); }, onReverse: () => { console.log("onverse"); }, onEnter: () => { console.log("onEnter"); } }); http://plnkr.co/edit/SG7iwRXKisKHJOV5?open=lib%2Fscript.js

I have a series of timeline, and I want to know how I can get the initial and final position of the scrollbar of a certain element within the timeline. I have code like this: tl.from("#square", { autoAlpha: 0, scale: 4, duration: 3, }); tl.to("#square", { x: 100, duration: 3, }); tl.to("#square", { rotation: 50, duration: 3, }); tl.to("#square", { x: 20, duration: 3, }); tl.to("#square", { scale: 1, duration: 3, }); //*************************************************** //I need the position initial and end of scrollbar in the next trigger tl.to("#square", { background:"yellow", rotation: 0, duration: 3, }); tl.to("#square", { x: 100, duration: 3, }); and I want to know for this timeline: //I need the position of scrollbar in the next trigger tl.to("#square", { background:"yellow", rotation: 0, duration: 3, }); the initial position of the scrollbar when it animation starts and when it ends. but I need to get this data before the trigger runs. how can I do it? this is my live code: http://plnkr.co/edit/HACVQky2IkNmz9Zz?open=lib%2Fscript.js

I will try to explain myself better. I have a container (.container) that is 100vhin height (I don't know if there is a better way to indicate that it occupies 100% of the viewport's height), and {pin:true}. .container{ background:orange; height: 100vh; } let tl = gsap.timeline({ scrollTrigger: { start: "top top", end: "100% top", trigger: ".container", toggleActions: "restart none reverse none", markers: true, scrub: true, pin:true }, }); and I have several timelines that chain-react when the scrolltrigger reacts to .container. tl.from("#square", { autoAlpha: 0, scale: 4, duration: 3, }); tl.to("#square", { x: 100, duration: 3, }); . . . I want to know how to do these 2 things: 1- I put many timelines, and I want each one to have a slightly longer duration, currently they are all showing very fast (as I understand it, they currently end before the end of the .container), how can I make them last longer? 2- I would like the height of the pin (.container) to depend on the number of timelines associated with it. How can I do it? thanks! this is my live code: http://plnkr.co/edit/eFDqDZJd37luAorU?open=lib%2Fscript.js

I have the following code: let tl = gsap.timeline({ scrollTrigger: { start: "top center", end: "+=50%", trigger: ".trigger", toggleActions: "restart none reverse none", markers: true, scrub: true, }, }); tl.from("#square", { autoAlpha: 0, scale: 5, duration: 8, }); tl.to("#square", { x: 100, duration: 5, }); when the scrolltrigger is activated, an element with the #square is animated, I would like the first part of this animation to last 8 seconds tl.from("#square", { autoAlpha: 0, scale: 5, duration: 8, }); and the other part of the animation lasts 3 seconds. tl.to("#square", { x: 100, duration: 5, }); how can I do it? excuse my ignorance, but I don't know how to do it, it not works for me. this is my live code: I don't know if seconds can be represented with the scrollTrigger, or at least I'd like to know how to make one animation last much longer than another. in my case the first lasts much longer in relation to the second, but I don't understand how the duration attribute works in this case. don't know if saying that an animation will have 8 seconds and another 5 seconds, the total duration will be 13 seconds in total http://plnkr.co/edit/zuhQF2NlfgnmoDfx?open=lib%2Fscript.js thanks

I think it is not the best place to ask this question, but could you please explain to me what this line does? end: "+ = 50%", it is supposed to receive 2 values ... I understand that the "+" indicates that it will execute "after", but in this case I am not sure (I refeer this codepen https://codepen.io/GreenSock/pen/b5f16030823680f5c5e57b33a5cf86c6)

works!! thanks!!

@akapowl I hope you are very well, thanks for the help the other day. when a transition is made from one element to another, the scroll stops at the top of the indicated element. How can I make the scroll stop at the bottom of the target element? thanks

I understand your concern, if the scroll is moved, the audio will stop, and when it is detected that the user has stopped moving the scrollbar, the audio will continue from the point where it is and according to the audio that corresponds to that moment.

ahh sorry, I got you wrong. My native language is Spanish. I have another idea, how about scrolling the scrollbar automatically in an animation faster or slower according to how long the animation should last

@ZachSaucier great!!!! When will you do it? I ask you to be attentive .. I hope you understand my problem.