Dennyno

(Edit: changed bg and added extra shadows...)

Like something I quickly did here https://codepen.io/DedaloD/pen/QWmprBV (I didn't take to make all shadows, I guess it could be achieved a pseudo elem). (Actually only CSS, just to go to the point and explaining what I mean) This point is just to talk and understand, not something really pressing...

Hi @ZachSaucier, this is an old thread. I always go back and forth to find something new or new approach to achieve something. In this case would be the same clipping a single background (around text) and moving just that, instead of the bunch of images / sprite ?

Forgot to thank you @PointC.

I forgot to thank u too @OSUblake

Hi @Cassie thanks for replying, gsap code is at bottom, I guess it's 5 or 6 lines of the gsap related code, while other stuff it just for the appeal of the card. Basically what Im trying to achieve is just: click here, morph and translate to top, while actually the morphing is buggy and plays when it wants to. One day, or another I must go for @Carl lessons about svg animations

Hi all, I was testing this card animation, while clicking on the ➕ button on my code, the svg should morph and translate to top as the video, following the card transition. Even is still a work in progress, I cant make it work properly. What am I missing? Any hint here please?

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?

Hi @mvaneijgen I did use your starting demo to something close to what I've been looking for (at least simplier). This is the final result: https://codepen.io/DedaloD/pen/GRywJOM I guess @Cassie would approve Thanks all

Oh wow! Thanks, you point me to the right direction

Hi guys, still testing premium plugins for customers. This time I'm trying to achieve this: morph svg while pinning its container and change the side text. Once scrolled: morph the svg and change the sidetext. On my demo I got as many svgs as many are the rows (using autoAlpha) - but I guess the best should a single pinned svg too, which morphs by scrolling. Thanks for any help, never used the club Morph Plugin (and also never nested timelines, if this is what's needed here).