[ScrollTrigger and Next.js - scroll position after route change]

 

On 6/30/2021 at 1:07 AM, GreenSock said:

I believe this is fixed in the next release which you can preview at https://assets.codepen.io/16327/ScrollTrigger.min.js

 

If you need a .tgz file (like to npm install), you can get it at https://assets.codepen.io/16327/gsap-beta.tgz

 

Does that work better for you? Please let us know if you notice any other issues. 

 

Hello, i have the same issue with my vuejs app.

 

How can we choose the version with `"gsap": "npm:@gsap/shockingly"` ? 

I cannot roll back to `3.6.1` with the bonus files 😕

Do we access to the beta files ?

 

Thank you !

[Scrolltrigger inside other pinned Scrolltrigger]

Yep !

 

The problem can be solve like that. 

 

In my real scenario, the "orange box" it's a component, it can be embed anywhere in my application, in a pinned element or anywhere else.

So the "end" cannot be set. The orange box must be autonomous.

 

But i just need to be sur.

 

It's a normal rule from the gsap scrollTrigger plugin ?

If a scrolltrigger is inside another pinned scrolltrigger, so the end still the same ? Its not like IntersectionObserver ?

 

Thanks again @akapowl

 

 

 

[Scrolltrigger inside other pinned Scrolltrigger]

Thanks, but this don't solve my problem.

 

The "end" can be any value.

 

The leave event is fired before the orange element has leave the viewport.

[Scrolltrigger inside other pinned Scrolltrigger]

Hello 

 

As you can see in the codepen.

I have a pinned gray section, inside a small timeline.

 

And i have an "orange" section. And i want to know when the "orange" section enter or leave the viewport.

 

With the "onEnter, onLeave etc..." everything works but when i put the orange section inside the pinned scrolltrigger, the "leave" event it's not "true"

 

It's hard to explain but if you check the codepen, you will understand (i hope)

 

 

 

 

See the Pen abNmBXo by stephanedemotte (@stephanedemotte) on CodePen

[translateZ() .. Is this a bug in Chrome and Firefox]

yosh !

 

Any news about this issue ?

 

translateZ still not working on firefox.

[Iframe in Draggable]

humm ok !

 

So we are forced to use a video html5 player, vimeo, youtube, etc.... will block the drag.. good to know !

 

Thank a lot for your help

[Iframe in Draggable]

Hi

 

I have a draggable with a iframe, in mobile, i can't move if my first touch is in the iframe.

The scrolltop is good, the touch on desktop too, but on mobile nothing.

 

So i can't use Draggable if i have a video(youtube/video) inside, on mobile.

 

If i hijack with dragClickables:true, all my links and the play button in the iframe become unavailable.

 

Anyone have a solution ?

 

Thanks

 

 

See the Pen XJexMj by stephanedemotte (@stephanedemotte) on CodePen

[Draggable scroll + custom scrollbar]

Thanks !

 

I will try to create something cool with gsap.

 

Thanks a lot !

[Draggable scroll + custom scrollbar]

Hi all,

 

I am looking for a custom scroll bar with Draggable Scroll.

For simulate a scroll like mcustomscrollbar or iscroll and keep the touch fonction for mobile.

 

I don't like the native scrollbar, i am looking for a thin/cute bar who appear only on mouse move.

 

Anyone have something like this ?

 

I have see : 

 

But not working on FF/IE

 

Thanks for reading

See the Pen WbvOrM by MAW (@MAW) on CodePen

[Classname + -webkit-]

Hi,

I have some issue since the last update with "-webkit-"

Not sure this bug has been fixed

• FIXED problem caused by some Webkit browser reporting redundant/duplicate transform values (in both "transform" and "WebkitTransform") of the computed style which could cause className tweens to act oddly.

I make a simple TweenMax.to('element', 1, {className: "+=active"});
and bam !

 

 

Only on Safari and Chrome.

 

Everything good with gsap : 1.15.0

See the Pen bNRXYO by stephanedemotte (@stephanedemotte) on CodePen