BebDev

Hi there, I want to create an animation where the pin is set to true and I want to use the scrub option, but because of the scrub, the pin ends before the animation really is complete. Please check the orange section on this pen: https://codepen.io/AbanobLeap/pen/XWGoGqN How can I make sure that pin ends when the animation reaches 100% Any help is greatly appreciated. Regards

Hi folks, I have a question and hope you can help. I'm using GSAP and scrollTrigger to animate a <video> on scroll, but on mobile. Everything works great on desktop, but on touch devices, the frames are changed after I finish scrolling (touchend) not while scrolling. Here's the code I'm using: let $video = $('video'); gsap.to( $video, 1, { currentTime: $video[0].duration - 0.1, ease: Power0.easeNone }, 0); Are there any parameters I need to add to scrollTrigger? Regards, Abanob

Thanks so much guys for the help. I followed @GreenSock method, everything is working great now.

@Cassie Thanks so much. This was so much helpful. Sorry for being a headache. I'm just one step away. As you can see in this pen, I managed to get everything to work fine, but I have one question. Can I make that to happen as a part of another timeline? So, what I want to happen on scroll is: 1- The image should rotate 360deg 2- Scale to window width/height 3- Change opacity to 0 Pin Thanks again for your help.

@Cassie I managed to set the width/height to the same as the browser window, but any idea how to make this to work on scroll using scrollTrigger? Regards

@Cassie Thanks so much. May I ask does this work with scrollTrigger? I mean I want the scale to happen on scroll. Does FLIP works with that? Thanks again!

Hi guys, I'm currently trying to scale an element until its width/height matches the screen width/height. I managed to do that for the width, but the problem is that I can't set the transformOrigin value to be correctly calculated on all screen resolutions. Any help would be appreciated! Regards

Hi there, I have a simple question. Can I scale an element until its width/height reaches a specific value? In the attached pen, I want to scale the heading until its width is equal to the browser window width. Is that doable? Regards

Hi guys, I'm currently working on a project and want to use ScrollTrigger to create a horizontal scroll, but with nested pinned animations. As you can see in the pen attached, I want the orange section to be pinned until the opacity of the paragraph equal 0. I managed to create the ScrollTrigger instances, but I don't know how to pin the orange section till the animation ends. Any help would be greatly appreciated! Cheers!

Hi @ivevil I really need your advice about how you encoded your video to play smoothly. I'm trying to play video on scroll, but it's very choppy and @Rodrigo told that it might be related to how the video was encoded. So, any help would be appreciated! https://codepen.io/abanobakram/pen/yLjEBKz Regards

Hi guys, I'm trying to use ScrollTrigger to play a video on scroll. The issue I'm facing is that the animation is choppy for some videos, but works smoothly on others. So, I'm not sure if there is something wrong with the video or my code. I created a simple pen with two videos, the one on the left is very choppy. Any advice would be appreciated.

Hi guys, Sorry for being a headache, but just found an issue that I when I try to inline style given to the element, it does not work. What I want here is to use clearProps after 2 seconds. After two seconds, what I see is image still hidden. Am I doing something wrong? Cheers!

Hi @GreenSock Thanks so much guys. Seems to be working now !!

Hi guys, I'm trying to change the opacity from 0 to 1 using gsap.from(), but it's not working with scrollTrigger. Am I doing something wrong here? Cheers!

Hi @Carl Thanks so much for the reply. Please check this pen. If I have an array of 10 timelines, each one has an ID of "timeline-" + index. https://codepen.io/abanobakram/pen/XWqNEGN I tried to console the timeline instance on button click, but getting "undefined" Cheers!