Jump to content
Search Community

Semblance

Members

  • Posts

    10

  • Joined

  • Last visited

 Content Type 

Posts posted by Semblance

    Reveal elements one at a time on scroll

    in GSAP

    Posted

    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

    See the Pen NWKRjVj by semblance (@semblance) on CodePen

    Looping through list to animate one item at a time on hover

    in GSAP

    Posted

    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. 

    See the Pen bWPNGo by semblance (@semblance) on CodePen

    Animating between two SVG shapes to look like gentle swaying

    in GSAP

    Posted · Edited by Semblance
    I ended up having another question to add

    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!

    8-)

    • Like 2

    Animating between two SVG shapes to look like gentle swaying

    in GSAP

    Posted

    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:

    See the Pen qmMdGV by mikeK (@mikeK) on CodePen

     

    I got something going myself with the initial pen I posted: 

    See the Pen 09c0cc7ccf25273c17b13390b61339a9 by semblance (@semblance) on CodePen

     

     

    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. :-)

    Animating between two SVG shapes to look like gentle swaying

    in GSAP

    Posted

    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! 8-)

    Animating between two SVG shapes to look like gentle swaying

    in GSAP

    Posted

    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... :shock: 

    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. 

    See the Pen JYpOOK by osublake (@osublake) on CodePen

    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. 

    See the Pen 09c0cc7ccf25273c17b13390b61339a9 by semblance (@semblance) on CodePen

×
×
  • Create New...