Leaderboard

You can change maxDuration and minDuration while defining the Draggable or you can change it on the fly. You can also perform tests on distance between object and target location inside snap function to set the maxDuration. https://greensock.com/docs/Utilities/Draggable Read 'throwProps' under Config object properties In following demo I am changing minDuration to demonstrate.

Hi @iuscare The target of the tweens is undefined the way you have it written. // your target is a let a = el.querySelector('.inner1'); // but your tween is targeting a[0] which doesn't exist .to(a[i], .2, {opacity: 0,left: 15,ease: Sine.easeIn}) GSAP also does not have a stop method so I commented out the lines with that code. I assume you were probably looking for the pause() method? Here's fork of your pen. Hopefully that helps Happy tweening.

Hi @Mauro Bueno Welcome to the forum. You've already declared your variables so the tween target doesn't need to go in quotes. Please try this: tl .to(esqDir, 1, {x:2000}) .from(dirEsq, 1, {x:0}) .to(conteudo, 1, {scale:20}) .to(conteudo, 1, {autoAlpha:0}) or you could write it like this too: tl .to("#esqDir", 1, {x:2000}) .from("#dirEsq", 1, {x:0}) .to("#conteudo", 1, {scale:20}) .to("#conteudo", 1, {autoAlpha:0}) Either way should get you animating. Happy tweening and welcome aboard.

You can create a master timeline and add your child timelines at same position using position parameter. Now if you speed up master timeline both animations will stay in sync. https://css-tricks.com/writing-smarter-animation-code/ If you plan to move that bar that "triggers" the pulse then you will have to perform a hit test to trigger pulse. Easiest way would be to compare x translate.

I'd recommend waiting for an answer on the Pixi forum. We do have to keep the focus here on GSAP related problems and questions. This is a Pixi and general logic question. Thanks.

Take a look at PIXI JS docs and an example that shows how you can have interactive objects. https://pixijs.io/examples/#/demos/interactivity.js http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html I didn't understand your rest of the question, I will suggest rephrase your question and try posting it in PIXI js forum. http://www.html5gamedevs.com/forum/15-pixijs/

Thats because you are changing perspective on mouse event, so change in perspective causes a quick jump. Set perspective outside of event.

@iuscare Actually mouseover and mouseout bubbles so every time you mouse over or out on child elements it will trigger your event listener on parent. Instead mouseenter and mouseleave do not bubble so if you move your mouse on child elements, it won't trigger the event.

Please try the latest version of TweenMax <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script> I made that switch and it all seemed fine in FF to me. Happy tweening.

I would think you could give the anonymous <ul> a class or ID and only target the <a> elements in that list rather than all of the anchors on the page.

JS Bin should work just fine. Here's an example of jQuery and GSAP. https://jsbin.com/cepafenigi/edit?html,css,js,console,output Be sure you're loading the libraries that you need. Here's the GSAP link: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>

Sorry, but I'm not really following your question. It sounds like you may need to read some more about media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries A good article on CSS Tricks https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ If you have any GSAP specific problems or questions, we're happy to help.

@pointC, @Sahil, Thanks to you both. Ok so I've got the idea of a master timeline and triggering tidy functions from the excellent css tricks article. This is where I was at just before @pointC kindly did it for me again!..... // RED DOTS TO RIGHT function dotMove() { var dot = document.getElementsByClassName("animation-inner-dot"); var tl = new TimelineMax(); tl.staggerTo(dot, 3.5, {x: 422, repeat: -1, ease:Linear.easeNone}, 0.7); return tl; } // BLINKING RED DOTS function dotPulse() { var pulse = document.getElementsByClassName("animation-pulse-dot"); var tl = new TimelineMax(); tl .staggerTo(pulse, 3.5, {opacity:0, repeat: -1, scale: 4, delay: 1.95, ease:Power4.easeOut }, 0.7); return tl; } var master = new TimelineMax(); master.add( dotMove().timeScale(0.5) ); master.add ( dotPulse().timeScale(0.5), 0 ); Now from looking at @pointC's pen I could theoretically speed up or slow down an entire animation sequence with something like the following...Basically adjusting the timescale in one place on the master. var master = new TimelineMax().timeScale(0.5); master.add( dotMove ); master.add ( dotPulse(), 0 ); master.add ( somethingElse(), 0 ); master.add ( anotherThing(), 0 ); I think I'm starting to picture how things might fit together in nested timelines as complexity builds. One thing I'm not sure of is in this code from @pointC.... In the "animation-pulse-dot" tween at the end there is the 0.7 stagger delay but what is the 1.95 value doing? console.clear(); var tl = new TimelineMax().timeScale(0.5); tl.staggerTo(".animation-inner-dot", 3.5, {x: 422, repeat:-1, ease:Linear.easeNone}, 0.7) tl.staggerTo(".animation-pulse-dot", 3.5, {opacity:0, scale: 4, repeat:-1, ease:Power4.easeOut }, 0.7, 1.95); And just one last question about the forum in general. What is considered best to do with example pens. How long should they be left in the post so others can see the example relating to the initial question. Really I'm asking at what point is it reasonable to delete example pens form my codepen or should they be left accessible indefinitely. EDIT: I realise what the 1.95 value is. Alternative place to put the start delay.... Many thanks again Mark

Here's a quick fork of your pen with the idea @Sahil mentioned. I added a dragger to adjust the timeScale(). Hopefully that helps. Happy tweening.

Craig you are a lifesaver!! i was losing my poor little mind

Hey @PointC always to the rescue, thank you so much for giving me this input. I got it working. One problem persisted, because vanilla mouseover and mouseleave events also fire when hovering over a child element of the button, which is not intended, of course. I managed to get around by setting the pointer-events to none for those child elements and hope I won't cross browser incompatibility issues. Anyway thank you so much for your help!

Hi @mjwlist I'm not sure I follow the question. Do you want that entire animation to increase/decrease speed? Or did you mean that you wanted to slow the dots horizontal animation, but still have them pulse at the trigger? Most anything is possible. I'm just not clear on the desired outcome here. Thanks and happy tweening.

I'm not sure I completely understand the question. You're throwing an element and using hitTest, but also talking about autoScroll? We can better assist you with a demo. Here's some more info about creating one. Thanks and happy tweening.

I'd probably just set a variable depending on window width. Maybe something like this: var topScroll = window.innerWidth < 737 ? 50 : 100; // then add it to your tween TweenMax.to(".signup_header", 0.1, {css:{display:"block", top:topScroll}, ease: Power4.easeOut});

Please try creating your timeline outside of the resize function and play/pause it depending on window size. You also have a typo on line 10: // bad tl.pause // good tl.pause(); Happy tweening.

There are numerous threads about responsive animations and media queries. You can use the forum search feature to find them. Here are a few to get you started. Happy tweening.

I can't imagine something that wouldn't be compatible with GSAP. Think of it as a generic property manipulator - it can tween any property of any object that JavaScript can touch. It doesn't care if it's a D3 object, a DOM element, SVG, or a generic object. For example: //create a generic object with whatever property you want... var obj = {myProp:10}; //GSAP can tween it: TweenMax.to(obj, 2, { myProp:200, onUpdate:function() { console.log(obj.myProp); } }); As long as JavaScript can touch it, GSAP can animate it. D3 is no exception. Does that clear things up?

Doh! Knew it was something obvious like that. Also, I just realized that the Blake's Codepen you linked a few days ago for me - http://codepen.io/osublake/pen/XJQKVX - might be perfect in this situation. Just need a wrapper that animates to width: 0. I'll see if I can get something going based off that.