Dennyno

Thanks @Cassie, gonna see what happens

Hey @GreenSock Jack, solved banally with a Scrolltrigger condition
Thanks

See the Pen xxyWojJ by DedaloD (@DedaloD) on CodePen

Solved, using the right approach


See the Pen OJZBOYX by DedaloD (@DedaloD) on CodePen

Hi guys, need to draw the text around the circle path by scrolling.

I came from a @PointC demo that used the click event, and I changed it to scrolltrigger and scrub.

Questions are: how to handle long text (many words with spacing?)  and most important: why on mobile I got problems and doesnt roll at all?

Last (but not important, it's more to understand, being that Im lacking on svg animations ) how to make the first path draw itself before the text rolls? (Or fills the path itself with another colour [always meaning before the text roll] ?).  Do I need to draw a secondary path ?

Thanks
See the Pen VwQVzEW by DedaloD (@DedaloD) on CodePen

Hi Blake!
Solved both problems.
 
EDIT: wrong url: https://staging11.whynot.media/unlock
The wrapper was an <a> tag, so I'd needed to put a preventDefault to prevent default click action.
Now I changed to a simple div and works smoothly.

The problem Is that my percentage scrolls till 101~120 % on some pages.

How can I put a maximum value? (Also is strange that the value is higher than the 100/100 of the height)

(Sorry for not posting on codepen this issue, dont know how to replicate) 
 

Solved. 
Of course, being the gradients: images for the browser.. it can't tween and imagine what's between each step.
Like a baby image and a man: CSS can't image what's between. LOL shame on me.

Solved just changing the markup and an extra trigger on the first section.

Now push thiisssss under featureddddd Jackkkkkkk @GreenSock ❤️😛 

Ps extra question: is this doable even without data-attr? Just by observing default css bg colours? 
 

Solved. 
Of course, being the gradients: images for the browser.. it can't tween and imagine what's between each step.
Like a baby image and a man: CSS can't image what's between. LOL shame on me.

Solved just changing the markup and an extra trigger on the first section.

Now push thiisssss under featureddddd Jackkkkkkk @GreenSock ❤️😛 

Ps extra question: is this doable even without data-attr? Just by observing default css bg colours? 
 

Hi Blake,  what about loading a gif as video poster, to give the sensation that there's a video there? 💡
Seems the easiest way to make eldest users understanding the movement. 😅

Just one little hint: how to make the scaling staying always on center of the x-axis?

I tried with transformOrigin:center center, but on my demo https://staging11.whynot.media/unlock the animation float to right.

Ps thanks for the code

EDIT: solved the codepen example (just adding the placeholder and cleaning the code, nothing extra, but it works as needed - even it's not the sexiest solution ever 😅)

 

Thanks for anyone, solved by removing the carousel wide scroll-snapping, and appending it only to the last items.

Now, just one extra hint: I set the animation to start after 150px... how to make it start after the first element has scrolled, indipendently from its size?

Using grids, all the items are responsive, so let's suppose: on mobile  each item has 150px width, so it's good to put a starting point after 150px from top (in this case left), but on desktop each item could be, instead, 250px. So in this case I'll need an offset of 250px

Thanks again

If still interested, I got it working here 
See the Pen MWEpbZz by DedaloD (@DedaloD) on CodePen


And on related post of my account, you may seen all the effects you can achieve.

You just need to play with transparency, curls, and strengh .. 

Well then, tx anyway @OSUblake !
I even gonna give up on this, cuz Regl gives many errors on console and makes Safari crashing on mobile

I see, ok then.. thank you!

So sad I cant use that canvas on my code, having many divs in different positions and z-indexes... so trying to add that  as as the last element in the dom, with position fixed, gives problem: z-index:0 is higher then the body and it's stuff, and z-index -1 puts the canvas itself behind, so not visibile.

I give it up this time

My fault.
Always used a container as trigger.

Gonna try the way you said, thanks .

That demo seems really what I was looking for!
I will add a scrub and a pin and test it.
Thanks!

Yep the Codrops article (doenst) says it all, but they did many nested files and the tutorial vs final result is a bit (aka a lot) different, and there are many and many files that are missing from their easy demo.

Btw thanks for the hint!