[ScrollSmoother scrolls to top, when popup opens]

Hi.

I have a problem with ScrollSmoother.

Every time the promo popup opens on my website, the page scrolls to the top. It is related to ScrollSmoother, because when I disable the SS, the problem is gone.

Any ideas how to solve this?

[GSAP seamplessLoop helper function with flexible width elements and active class on active element.]

@Toso Great! What a Wizzard!

Thanks a lot!

[GSAP seamplessLoop helper function with flexible width elements and active class on active element.]

Hi @Toso Thanks for your help!

I'm just showcasing this code on codepen. Testing it on my local enviroment, so I'm sure gsap is working just fine (with problems I mentioned).

Is it possible to make "slides" jump, one after another, instead of smooth movement, in your example?

[GSAP seamplessLoop helper function with flexible width elements and active class on active element.]

Hi. I'm trying to utilize helper function "seamlessLoop".

I'm trying to use this example: , but have some problems, with that:

1. When I use  const boxes = gsap.utils.toArray(".box"); and passing that constant to horizontalLoop() function, this happens:

but when I pass html selectors directly '.js--pelion-reviews-tape .wrapper .box' it works fine as a loop/marquee.

The problem I get here is that onChange method doesn't work (doesn't add and remove "active" class).

Here is my code:

See the Pen oNVRqJb by DW922 (@DW922) on CodePen

The only thing I want to achieve here is to have a "marquee", with "active" (center I guess) element highlighted.
 

 

Thanks for all your help

See the Pen gOvvJee by GreenSock (@GreenSock) on CodePen

[Why animating height from "0px" to "auto" is not affected by duration property?]

True, I have experienced this conflict myself

[Why animating height from "0px" to "auto" is not affected by duration property?]

Ok let me answer my own question, because I was playing with it after asking it and "eureka" xD

 

It's because I am using "scrub" and scrub controlls animation time. In order to be able to alter duration I need to disable srub, and If I want to "reverse" animation by scrolling up, I need to use

toggleActions: "restart none none reverse"

 

 

[Why animating height from "0px" to "auto" is not affected by duration property?]

Hi!

I wonder why my animation based on ScrollTrigger, that animates heigh from 0px to "auto" is not affected by duration.

I am making accordion, that expands on scrollTrigger action, but I can't alter the animation time while the accordion is expanding.

On the other hand, when I use CSS "transition" property, my expanding animation "jumps" instead of smooth execution, but collapse animation (other way) seems to be working just fine.

Can you explain to me why is that? And can I do anything to make this work?

See the Pen NWLOpRY by DW922 (@DW922) on CodePen

[GSAP Animations lagging (ScrollSmoother + Optimisation?)]

Good idea, I will check that too.

What about GSAP config itself? I think, the JS code is pretty slim.

Is there something else I can change to use GSAP better in this case?

[GSAP Animations lagging (ScrollSmoother + Optimisation?)]

Well, the images are mostly cropped to fit 1920p screens (I mean original images, not the ones from the example) and their size is between 400 - 800kb. Do you think it's still too heavy?

Yeah, I haven't tried without clip-path. That's a good idea.

[GSAP Animations lagging (ScrollSmoother + Optimisation?)]

Hi,

 

I have a problem, that some of my co-workers experience lagging and stuttering while browsing a website, that was made using GSAP (ScrollSmoother, ScrollTrigger included).

The most problematic part is the Hero section with 3 parallax effects, so I included it, as a codepen here. It's just simply a code and some random pictures from the web, because I can't share my own assets on free CodePen plan, but the html/css/js structure is exactly the same, as in my project.

Can you please take a look and tell me, what can I do to optimize it, as much as I can, in terms of GSAP parameters? I am going a little blind here, because this works perfect on all of my machines (from newest to oldest, with dedicated GPU and integrated one), and all I have is someone else's experience.

The assets are optimised as well. I made sure, that the pictures are as small and lightweight as they can be, so I'm out of ideas now...

 

Thanks!

See the Pen GRXqxZe by DW922 (@DW922) on CodePen

[ScrollSmoother breaks ScrollTrigger?]

Hi,

 

I have a problem while using ScrollSmoother and ScrollTrigger together. My animations that depends on ScrollTrigger are broken - part of the animation fires without any transition. E.g. I have an animated text, where I animate it letter, by letter, via Timeline. The problem is - first or even second letter sometimes appear immediately, without any duration.

Is that a known bug or something that happens only to me?

[Animated handwriting effect with complicated font (multiple masks and open paths)]

Thanks @PointC ! Exactly what I was looking for!

[GSAP DrawSVG on scrollTrigger with stroke-dasharray]

Hah. Sorry @PointC for ignoring you Cassie's solution was so good, that I went straight to coding

[Animated handwriting effect with complicated font (multiple masks and open paths)]

Hi!

 

I have an svg with pretty complidated font

 

I would like to make an animation, that imitated handwriting effect.

i've encountered this topic:

And as far as I can see there are two ways of doing it - one mentioned is - doing it with multiple masks on svg, and the other one is with open paths method (so I guess I'm gonna need Adobe Illustrator knowledge to do it).

Can you please explain it to me - how the multiple masks method works? Can you share some tutorials on this topic?

Is it even possible to do it with a font like that?

PS. Font name is "Manila" btw.

 

Thanks!

[GSAP DrawSVG on scrollTrigger with stroke-dasharray]

20 hours ago, Cassie said:

Hey there!

Here you go - 

 

 

Thanks! Works great for me!

[GSAP DrawSVG on scrollTrigger with stroke-dasharray]

Hey.

I have a simple SVG with stroke-dasharray, and I want to animate it using ScrollTrigger.

The problem is - I want to reveal my SVG pattern with stroke-dasharray not modified, but when I do animate it, my stroke-dasharray disapears, making my svg a straight line.

Is there a way to animate it the way I want to do it? Without losing dashed pattern?

See the Pen oNPXQVY by DW922 (@DW922) on CodePen