Dennyno

Hi, sorry for the belated reply. I did somethig here, just to learn stuff. https://codepen.io/DedaloD/full/KKQrZmr How can I achieve 1: to draw the path on reverse state, (same as text?) 2: to make text start with low opacity and fade in to full opaque, only while exiting from the circle? I tried many combos on the timeline and many gsap syntax, but the transition always start as same as other ones. So the text is full visible as soon as the animation starts.. and this is something that hurts the eyes , getting text over text

Thanks for replying! As Tripti did here (and also on the GSAP draw svg demo) https://codepen.io/tripti1410/pen/GRyBxeZ it's a lot of code, paths and elements to understand and debug

EDIT: Solved the rolling on mobile: it has been a spacing problem. EDIT 2: understood also how to handle the offset. 🤭 Still need to understand how to handle long text (maybe with overflowing?) . And how to draw the first path before the animation starts? Does it work as any other timelines and gsap animations?

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

Cuberto, GSAP and "prebuilt" is a ternary that doesn't work at all @Tanvi_Patel I couldnt find the animation you are talking about, btw, you may just change your code, even starting with CSS, till the gsap versioning. You're translating your code on the X axis, (the first parameter on the translate3d); while you need the second one. Being you working in a 3D space, you gotta thing about X, Y, Z. Good luck

Hi @akapowl, thanks for hint! Yep, seems not related to gsap at all, as it also seems that I sadly can't handle the mobile view... even changing the data attribute to fix the sizes/min-sizes/max-sizes = no luck ... as last chance I also increased the mouse repulsion, but nothing happens on mobile and on desktop particles literally explode on the screen. What a pity. Will look for any other lib that can handle the particles. Found many, but need to find the interactivity and also the possibility to get 2 columns on mobile, because getting 12 logos could be really long in a single column view. thanks for the while ☺️

Hi all, on this demo, particles images load correctly but.. the interactivity seems totally gone: touchstart animation / mouseenter got strange issue (doesnt start at all) while adding gsap. Is something related how the script / canvas works? (Maybe because the canvas needs to see images as soon as possible (starting after img-loaded) , while using scrolltrigger to show and hide elements container cause a conflict?). I can avoid using scrolltrigger and show elem as is, but I was tryin' to make each of them, fadein staggered with GSAP. Thanks for any help

Hi @PointC, I did updated the syntax to gsap3 and mixxed some new stuff here and there. Just to let you know, before someone give you a poke on this. 😊 https://codepen.io/DedaloD/pen/YzeePYw

Still no solution, maybe too too complex issue? Uhm...

Hi @Cassie and thanks ☺️ Yep technically I’m able doing that, just a loop and translate.. but how to synchronize each item to its anchor? aka I mean, if I scroll to elem X, then the horizontal carousel scroll to its related element X, centering it… It’’s something doable via Gsap or do I need to pass via interception observer?

Hi, is this something doable with Scrolltrigger / Scrollproxy? Making a marquee following the id of the sections. I made a quick idea with just CSS to show the markup. Thanks

Hi Jack, thanks. My code works strangely, some lines disappear …

Any small help here too: https://codepen.io/DedaloD/pen/mdXJRMp ? While the steps should be https://studiovoila.com/about/.. What the logic behind? A pause after each transition?

@OSUblake thanks for the like! Do you get any idea why I got that huge full white padding at bottom? Thanks

I just cant understand whats the white space below? Code seems the right one. Could be somethin related to Codepen?