Leaderboard

Hello @namisuki and Welcome to the GreenSock Forum! To make an image slider it would have many parts. As far as the flip swinging door effect, here is an example of doing that in GSAP. It uses a mouseenter / mouseleave event, but the event can be changed to click. But it will show you the HTML markup and CSS used to setup a swinging door effect, and animating the CSS rotationY (rotateY) property. Happy Tweening !

I'm not much of a React/Vue/framework guy so I'm not in a good position to answer this, but hopefully @Rodrigo (the author of that article) or one of the other moderators with experience in that stuff ( @Dipscom, @OSUblake ) will chime in. My suspicion is that React/Vue like to swap things out from underneath you in the virtual DOM, so they prefer that you use their own way of referencing things so that you don't have references to stuff that they nuked. I could be wrong. Either way, though, in order for GSAP to work they can't just willy-nilly swap stuff out mid-animation because those instances are referenced by GSAP. In other words, if you've got a <div id="thing"></div> and GSAP starts animating that (maybe it got the reference via a "#thing" selector) and then React is like "yeah, I'm just gonna nuke that and build another <div id="thing"></div> in its place), that ain't gonna fly. It'd be extremely inefficient too if GSAP had to keep on re-querying the DOM (or virtual DOM) to update its reference 60 times per second, you know? So it seems to me like CSS selectors probably work fine as long as your animation is starting immediately (and React/Vue aren't swapping stuff out mid-tween), but using the ref instead ensures that scheduled tweens have the best chance of using the proper element if React/Vue decided to rewrite something in the virtual DOM between when your animation code was evaluated and when it actually begins. Again, just my guess. I'm sure someone else can offer a "real" answer

@Robert May Timelines are objects that can be stored in a variable for reference. Example var tl1 = new TimelineMax(); var tl2 = new TimelineMax(); var tl3 = new TimelineMax(); Hope this helps!

I think that qualifies as a "real" answer, haha. Definitely helps. In case @Rodrigo or another React vet has a chance to assist, allow me to briefly set some small context here. In a nutshell, I'm trying to find the most efficient way of utilizing gsap within React 16.7 -- more specifically, using gsap with the newly introduced hooks such as (useEffect hook), and without the use of classes. In the mean time, when i get a chance this evening I will continue tinkering and try to incorporate refs to ensure the best chance of expected behavior.

Dynamic content including images and live text is stored in a Google sheet. Naturally, you'll need a Google account with access to Studio. Your best bet is to follow Google's docs to properly code your ad: https://support.google.com/richmedia/answer/3526354?hl=en You can also contact Google to get help with their API. You can upload code to them and in some case they write large sections of code for you.

Hi @Robert May, That's because Javascript doesn't accept variable variable names the way other languages do. For example, in PHP you can do the following $foo = 'bar'; $$foo = 'baz'; echo $bar; // output would be 'baz' echo ${$foo}; // output would also be 'baz' In Javascript, variables are stored as properties of the window object. So the following illustrates how to use variable variable names in Javascript var tl0 = new TimelineMax({paused: true}); var tl1 = new TimelineMax({paused: true}); var tl2 = new TimelineMax({paused: true}); var tl3 = new TimelineMax({paused: true}); for( var i=0; i<4; i++ ){ console.log( window['tl'+i] ); // outputs the timeline objects } I assume in your example ... console.log(currentTimeline + "Tl") var tempTimeline = document.getElementById(currentTimeline + "Tl") tempTimeline.pause(); ... that `currentTimeline` simply refers to a string ... so console.log will simply concatenate and output what you expect, but that doesn't refer to any timeline. The way you are trying to reference the timeline is through an element selector, which won't work (that's looking for a DOM element). Timeline's are Javascript objects. So, as in the previous examples, the way to reference a Timeline is by its assigned variable name. Here is a codepen illustrating variable variables in Javascript and how to reference a timeline. Hope it helps!

Howdy @Friebel. Sorry, I'm totally unfamiliar with all that stuff. I wish I could help more, but perhaps someone else will chime in. If you've got any GSAP-specific questions, we'd be happy to address those. Cheers!

Hi @OSUblake, Your bezier idea is great. So I tried this ... As always - a pleasure! Best regards Mikel

Hi and welcome to the GreenSock forums, Thanks for the demo. Please try var mummudRepeat = new TimelineMax({repeat:-1}) var mummud=$('#mummud > g path'),mummudArray=mummud.toArray(); mummudArray.sort(function() {return 0.4-Math.random()}); mummudRepeat.staggerTo(mummudArray, 0.2, {opacity:0, repeat:1, yoyo:true}, 0.4) by repeating each staggered tween with yoyo:true each dod will fade out and then fade back in.

I like to animate x and y separately for random movement. Another approach is a Lissajous curve.

Yep, I'd do exactly what @MindGamer recommended. Simple example: function random(min, max) { return min + Math.random() * (max - min); } function gotoRandomPlace() { //notice the onComplete points back to this same function, so it'll keep going to random coordinates TweenMax.to(...{x:random(-100, 100), y:random(-100, 100), onComplete:gotoRandomPlace}); } gotoRandomPlace(); As for vw/vh units, those aren't supported on transforms because to maximize performance, GSAP bakes everything into matrix() or matrix3d() values which are always px-based (although it does support percentage-based values as well by prepending a translate() or translate3d()). You should be able to relatively easily convert vw/vh on your own, though, like: //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); The only caveat is that since the end result is in px, things won't shift if the window gets resized AFTER the tween finishes. But you could certainly use an onComplete to set those units directly, like element.style.transform = "translate(50vw, 20vh)"; if that's essential for your context. Does that help?

I wasn't sure what part of the code you really needed help with. Its really best to reduce things as much as possible for support issues. I wasn't sure if we should be looking in the mousemove and mouseleave functions too. I agree with MindGamer, a recursive function call is probably best for what I think you are describing. Move something someplace, and when its done move it another place: This thread has some more advanced solutions