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!

Hi guys, I'm trying to give my timeline an ID to be used later, but I'm not sure how can I get the timeline instance by its ID. var myTimeLine = gsap.timeline({ id: "mytimeline123", repeat: 3 }); I need something like this: gsap.getByid("mytimeline123"); Cheers!

You're right, scrub property is not needed. Basically, I want the image to be once I start to scroll until the second section ends. Thanks to you, we managed to achieve that. Now, I want the viewport to be locked on the second section (until the animation of the title Hello World ends), that's why I pinned it in the second timeline. Hope I clarified myself properly. Cheers!

Thanks so much @mvaneijgen for your help. One more question please. If I have another timeline with pin set for the second section. Is there any way I can keep the image pinned until the animation of the second section ends? https://codepen.io/abanobakram/pen/yLjVoRo Now, when the second timeline is trigger, the first one ends and the image scrolls. Is there any way I can use to make the image detects the second section has a pin and should be sticky until the second animation ends? Thanks so much!

Hi there, I'm currently working on a simple project using Scrolltrigger. As you can see in the pen, I'm having two sections, and want to pin the image in the first section until the second section ends so the image position is fixed and stops at this point. Does "end" prop can help me with this? Cheers!

Hi iDad5 akapowl Thanks so much for the valuable information. I greatly appreciate that. I made some progress to understand what should I do when I have a composite path SVG, but with this SVG, I can see a singe 'M' letter in the SVG path, I set the duration to 10 seconds, but the SVG is being drawn in much less time, but if I checked the inspector, the "stroke-dasharray" CSS property is still being changed even after the SVG is fully drawn. https://codepen.io/abanobakram/pen/rNdrqVR Any advice please? Cheers!

Hi guys, I'm having a look on your DrawSVG plugin. I've created SVG using Boxy SVG. Basically, I want to draw the SVG, then fill it with a color. At first, I noticed it takes a lot of time after the SVG is drawn and before the color is filled. So, I checked the console, found that the stroke-dasharray CSS property is being changed even after the SVG should be drawn. Am I missing something? Cheers!