[Issue when pin is true and scrub is set]

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:

 

How can I make sure that pin ends when the animation reaches 100%

 

Any help is greatly appreciated.

 

Regards

See the Pen XWGoGqN by AbanobLeap (@AbanobLeap) on CodePen

[Does scrollTrigger work on touchmove or touchend?]

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

[Calculate TransformOrigin Dynamically]

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

[Calculate TransformOrigin Dynamically]

@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.

[Calculate TransformOrigin Dynamically]

@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

[Calculate TransformOrigin Dynamically]

@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!

 

 

[Calculate TransformOrigin Dynamically]

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

See the Pen vYrLRex by abanobakram (@abanobakram) on CodePen

[Scale element until full width]

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

See the Pen MWGRWxg by abanobakram (@abanobakram) on CodePen

[Horizontal Scroll With Nesteed Animations]

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!

See the Pen WNJBRpd by abanobakram (@abanobakram) on CodePen

[Video + text appearing]

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!

 

See the Pen yLjEBKz by abanobakram (@abanobakram) on CodePen

 

Regards

[Play Video On Scroll is Choppy]

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.

 

See the Pen yLjEBKz by abanobakram (@abanobakram) on CodePen

[Clearprops not working with .from()]

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!

See the Pen mdLMrNx by abanobakram (@abanobakram) on CodePen

[Autoalpha not working with Scrolltrigger]

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

[Autoalpha not working with Scrolltrigger]

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!

See the Pen bGMWzjE by abanobakram (@abanobakram) on CodePen

[Get timeline by its ID]

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.

 

See the Pen XWqNEGN by abanobakram (@abanobakram) on CodePen

 

I tried to console the timeline instance on button click, but getting "undefined"

 

Cheers!

[Get timeline by its ID]

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!

[Scrolltrigger end property]

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!

[Scrolltrigger end property]

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?

 

 

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!

[Scrolltrigger end property]

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!

 

 

See the Pen yLjVoRo by abanobakram (@abanobakram) on CodePen

[SVG takes too much to be drawn]

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.

 

See the Pen rNdrqVR by abanobakram (@abanobakram) on CodePen

 

Any advice please?

 

Cheers!

[SVG takes too much to be drawn]

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!

See the Pen mdxpwEO by abanobakram (@abanobakram) on CodePen