BradLee

Trying to use 2 timelines to translate an object (this is an abstraction from a much larger code base). I don't understand why the object won't move back and forward.

Codepen is below. I'm not sure how 'isActive' is supposed to work as it will return true, irrelevant of whether the tween is finished or not in this example. I tried using the function 'invalidate()' to reset values but had to remove it as it was freezing the browser.

I have a button which starts an animation. What I want to do is restart the animation if the user pushes the button during an existing animation. The code below just stops the tween for a split second then continues the existing animation. myTween = TweenLite.to( circle, 1, { opacity: 0, attr: { r: 12, }, ease: Power2.easeIn, onStart: reset, onComplete: reset, onOverwrite: () => myTween .restart() } )

Cjke, thanks for the reply but I don't think that is right. When Webpack bundles all the js it will look for all the dependencies. If a dependency is included via a CDN it can't 'see it' and will throw an error. I think the only way to get around it is via the webpack.config file where you can say 'ignore this dependency' as it is included via a CDN and will work during runtime.

Is there a way of using CDN's without having access to the webpack.config file? I'm using facebook's create-react-app.

I used the CDN method, thanks for the advice.

Hey guys, I'm having trouble trying to import scrollToPlugin via webpack. This is the error I'm getting - Error in ./~/gsap/src/uncompressed/plugins/ScrollToPlugin.js Module not found: 'TweenLite' I've read in other posts that you modify the webpack.config file to resolve this however I'm using create-react-app and don't have access to the config file. Does anyone know a way around this?

When I tween 1 color to another, using rgba, it's alpha value gets set to a 6 decimal number, not a 2 decimal number that I specified. Example: I specify a tween to this color: rgba(0, 0, 0, 0.38) the color that actual gets set: rgba(0, 0, 0, 0.380392) This causes a problem when I'm comparing colors in IF statements. Does anyone know who to stop this from happening?

I have 2 functions, each returns a TimelineLite instance. I have another timeline that is made up of these 2 returned timelines. The problem I'm having is the master timeline is not firing the returned timelines in sequence, they both fire immediately. Any ideas why? <div></div> div { width: 100px; height: 100px; background: tomato; } let div = document.querySelector(`div`); let tl = new TimelineLite(); let move = () => { let tl = new TimelineLite(); return tl.to(div, 1, {x: `100px`}); }; let changeColor = () => { let tl = new TimelineLite(); return tl.set(div, {background: `blue`}); }; tl.add(move()) .add(changeColor());

thanks mate, big help.. Just for future reference, to use invalidate property, would I need to save the tween to a variable then call 'invalidate()' on that variable when the tween completed? Like: var myTween = TweenLite.to ..... onComplete = myTween.invalidate();

Can anyone see why this isn't working? I push a button to translate a div to the right, then invalidate the tween and reset the translation to 0 via div's style property. My assumption is that doing these 2 things should reset the div's transform. However, when I run the tween again it doesn't act properly (the div jumps instead of animating). <button>push</button> <div></div> div { width: 100px; height: 100px; background: tomato; display: inline-block; } let div = document.querySelector(`div`); let btn = document.querySelector(`button`); const move = () => { const onComplete = () => { div.style.transform = `translateX(0)`; }; TweenLite.to(div, 1, {x: 100, onComplete}).invalidate(); }; btn.addEventListener(`click`, () => move());

Is there a way to capture the element(s) being tweened within the onComplete param? For example, I'm trying to replace the code: 'element I'm tweening here' with the actual element that is being tweened. let div = document.querySelector(`div`); TweenLite.to(div, 2, {x:100, onComplete: () => console.log(`element I'm tweening here`)});

Is there a way to change an aria property (i.e. aria-hidden: false) using gsap. I tried to attribute plugin but that is only for numeric values.

yeah, thanks mate

sorry I didn't explain my situation the best. What I'm trying to do is animate an object from off screen to the center of the screen. What I have is - // original position (the element is off screen) - .myElem { position: absolute; left: 50%; transform: translate(-50%, -50%); top: -50%; } //then I animate - TweenLite.to(card, time, { top: `50%` }); So my question is how can I get the element to tween to the center of the screen without using 'top'