BebDev

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!