Semblance

@PointC aaaahh - thank you so much for that resource! ? Did not know about that page ?It is very helpful indeed. Best wishes.

Hello ? I've set up a CodePen where I would like to have a few projects (elements) reveal one after each other on scroll - as it appears on the page. From experience this is quite easy to achieve if elements have a different class / id. What I am struggling with however, wrapping my head around, how it can work if they all have the same class. Also to keep the approach and code 'DRY'. I've done a bit of searching around, but no luck finding anything that makes sense to me to use. My CodePen currently works with all of the elements disappearing at the same time on scroll... ? Would be great to someones thoughts / experience on this one! Thank you in advance. Elzette

Hello @PointC Definitely an aaaaha moment. That makes perfectly sense. Completely forgot about that one, but will definitely remember to think about that from now on. Thanks again for the enlightenment! All the best!

Hello I have a list of items, using a stagger as it load on the page (going to use it with scroll) - this is fine. But then I am also trying to apply an animation when hovering over one item. I have it all in the CodePen. After trying a few things myself, I ended up looking at this example: For some reason, when I hover on one it still apply the animation on all list items. Not sure if I am selecting something wrong / missing something. Any ideas? Thanks in advance.

Aaaah! That is a good one to know! Thank you!

Hi guys Thanks again for looking into this. I think it came out really nice! I have also made a thorough study of the code and resource/s. Which will be really helpful for future projects/pens too! @PointC there is just one thing that is not too clear to me - where you added the following as the first line: TweenLite.defaultEase = Linear.easeNone; Weird question... but because it is not wrapped in a function with everything else, how does the master timeline 'know' to use that as the default easing equation? All the best!

Still on the same topic... (Doing this animation also in the process of learning and wrap my head around GSAP timelines...) From the suggestions made in the thread and @mikel's demo: I got something going myself with the initial pen I posted: I have a feeling the approach I took, applying this effect to multiple items 'tulips' is not the best one. It would be good to know of a good approach, also for me moving forward using GSAP (the correct way). In this example, the flower head and leaves use the same animations, which I've added to one timeline and therefore just want to re-use that for all the flowers. The stems however, use a different timeline for each, because the end path of the morphing is in a different place on the SVG viewport (or that is how I see it, but please advise otherwise). For each flower I've made its own timeline for the morphing stem and then nesting the flower timeline within. I am wondering if this is the right approach. I am also struggling with the timings. I would like each flower's animation (as a whole) to start very slightly after each other. I have searched online, but can not seem to find anything... almost like the timelines of each flower need to 'stagger' after each other. At the moment all the bits seem out of sync... I don't understand the '0' at the end of the Morphing of the tween. If I remove it, the morph does not work. Is that an absolute time? In the syntax and code examples it is not necessarily there. Any thoughts / advice would be much appreciated.

Hello Manfred That is really lovely! Exactly the result I was trying to do. Also setup really nicely, so that I can wrap my novice head around it. Thank you for setting up the CodePen. Looking forward playing around with it. All the best!

Hello Carl Thank you for your quick response. I have not actually thought of maybe breaking it up as you mentioned. Using the 4 pieces and rotating/moving them slightly could most probably give the effect I am after. The world would not come to an end if it doesn't work, but I am indeed curious! Thanks again!

Hello! I am trying (hoping) to achieve SVG tulips to look like they are gently swaying from left to right in a type of 'evening breeze'. The way I have thought about it, is to have two outlines for each tulip and the morph between these two oulines back and forth to give the idea that its slightly moving. Erm... So looking at my CodePen, the result ended up being faaaaarrr from that... I thought trying to change the index point might help. But its still rather messy. Another issue could be that the outlines are too complex different. I am now not even sure if morphing is the way to go. I did have a close look at the GSAP WaveSVG function (the one for the morphing green cape), bit that is way to complex for me. I also found a previous article in your forum: This CodePen from the article is really lovely. It is this effect I was thinking about. But not sure how to apply that to SVG tulips... Any ideas? Is it possible? Do I need to work on the SVG shapes more? Thank you in advance.