Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by heldrida

  1. Hi,

    I'd like to know how to import the Easing package when using ES6? Or any other for that matter.

    At the moment I noticed that even though I did not import easing, it's available when importing TweenLite. So, I'd like to understand what I'm importing and when I have to import (a package, or the need to be specific).

    import { TweenLite } from "gsap";
    TweenLite.fromTo(this.refs.logo, 0.8, { opacity: 0, x: 50 }, { opacity: 1, x: 0, ease: Bounce.easeOut })
  2. I think your solution works, sorry had to reply quickly in the console so just did a quick test, need to check it properly

    TweenLite.fromTo(myTimeline, 1, { time:0 }, { time: 0.5, onComplete: function () { myTimeline.pause() } })

    Did a few more tests in the console and seems to be a good solution, here's the tested code:

    TweenLite.fromTo(myTimeline, 1, { time: myTimeline.progress() }, { time: 1, onComplete: function () { myTimeline.pause() } })
  3. @diaco thanks for replying!

    I had to edit my question, noticed I didn't mention Timeline.

    Ideally to work with a timeline, because I'm starting by declaring the animation, then depending on the user action I'd like to show the animation.
    Let's say, that the user is selecting a size and there's an object that will animate according to the user input value / preferred size.

    What I usually do is using the requestion animation frame and controlling the transition or input value in the call .progress(), so I can see it animating in any direction.

    Do you know if there's a way to do it with a timeline? I guess that your solution can work for me, but I'd have to declare it everytime

  4. Hi


    I'm wondering if there's a way to play to a given X time (timeline) ?

    The only way I see I can accomplish this, is by using request animation frame and call the progress method.

    I found about .gotoAndStop() but it's similar to seek and it doesn't play the animation until X value (jumps straight to X point)

    I'm now going to try to see at what time the animation is and for each step check if it's X time and stop or pause the animation.

    But would be much easier to have something like playTo (0 start 0.5 middle and 1 end)

    Any hint is appreciated!


  5. Hi,

    Using GSAP TimelineMax for a 360 rotate loop animation; On window resize, I can't seem to keep the element centred;  I've got a live link here

    If the page is refreshed, the instance when initialised at that point, has the element aligned properly. Only on window is resized, it breaks;

    So, I've tried to use the method "kill()" and also setAttribute style and removed any css styles from there; create a new instance, but it breaks, making the animation super slow;


    I wonder if there's a solution for this. Any tip is appreciated! Thanks!

    See the Pen wGBBmm by helderoliveira (@helderoliveira) on CodePen