Jump to content

Maxim Kurdyukov

  • Posts

  • Joined

  • Last visited

Posts posted by Maxim Kurdyukov


    On 3/25/2020 at 2:43 PM, ZachSaucier said:

    This sounds like you need .tweenTo() (or animating the timeline's progress) on the mouseenter, .reverse() on the mouseleave, and .play() on the click.

    Seems like i'm doing something wrong.

    I tried to use .tweenTo( ) with given parameter of 0.7sec, but animation "jumps" to that point. Usage with .reverse() gives the same result on reversed state of animation, it "jumps". Also having an issue with position of animation, while i hover that block, it always "jumps" farther and farther (check demo on codepen)


    Also i think that i need to unbind mouseleave event after i have played animation fully 


  2. Hi community! 

    First of all i want to say that GSAP is awesome! Pleasuring to use it, don't know now how things will be done without it..


    So the problem where i had stuck is next:

    First imagine page, with content, images, svg elements, and they are animated on start by css, let's say - "initial sliding animation". 


    Then we have next:

    1.  We have two visual blocks. 
      1. On click the block expands => "Triangle button" become visible. => Content inside it changes and animates => Content under it becomes visible, and we can scroll the page. ("Triangle button" have fixed position)
      2. When clicking "Triangle button" we need to show another block, and doesn't matter at what point of page we currently are, block should slide in.
      3. Plus we need hover animation.

    So the questions:

    1. Is there a way to play timeline to some point on mouseenter and play back on mouseleave, and if we click on it it expands fully?
    2. Now i haven' t any idea how to implement opening of another side when we scrolled already at some point on page. Hope you may help.


    Thanks a lot!

    See the Pen bMMGzL by kumaxim (@kumaxim) on CodePen