Leaderboard

Hello Gsap'ers, Another post about the function so requested: Transition between pages using our beloved GSAP. But unlike the others, instead of questions, I am bringing some answers. I decided to make a Simple site template with SPA, which I believe will help everyone who is looking for solutions to these tools without having to use a framework. The activation of transitions is very simple: just click on the photos to go to the corresponding page. I hope it's useful. Ps¹: It is necessary to use the BarbaJS lib Ps²: Some settings are still missing and you can optimize the codes, best experience in Debbug Mode View Ps³: I'm using the translator hahaha https://codepen.io/Noturnoo/project/full/ZeYREp/

Hey Beau, There's absolutely nothing wrong with the React part of your code, that's working as expected. You're generating the refs for each DOM node and using them in the componentDidMount method. The issue has to do with the GSAP part. Right now you're creating an instance in the timeline for each SVG element but you're not passing a position parameter, so GSAP is putting each instance at the end of the timeline, therefore each element is animated in a sequential way. In order to achieve what's happening in the second codepen you can use two approaches: Option One Add every single instance at the start of the timeline using the position parameter at 0 and add random delays to each one in order to create the overlapping. const tl = new TimelineMax(); waves.forEach( item => { tl.to( item, duration, {opacity: random(), delay: randomDelay()}, 0 ); }); That zero at the end tells GSAP to add the instance at the very start of the timeline, ie, time zero. The random functions are for creating random opacity and delay numbers. Option Two Create a random position parameter for each instance based on the duration of the timeline when that particular instance is being added to the timeline or by forcing the timeline to have a specific duration using the (you guessed... the duration method). Now this might be a little more complicated because you'll have to access the duration of the timeline or set a fix duration for it. Check this from the API: https://greensock.com/docs/TimelineMax/duration() So I'd recommend using option one if you can. Finally check this from professor @Carl in order to get a great grasp of the position parameter. https://greensock.com/position-parameter Happy Tweening!!

Hey Tomsah, getting back to it now. Not at all, your GSAP instance will be available to every method in the global scope of your module or file. Some people like to attach the GSAP instance to the react component like this: import React, { Component } from "react"; import { TimelineLite } from "gsap"; class MyApp extends Component { constructor(){ super(); this.projectTl = new TimelineLite({paused: true, reversed: true}); } render(){ return(...); } } This allows to pass some of the components props or state properties to GSAP's callback system and stuff like that or if you need to reference a specific method from your component in a callback, or perhaps update the state using onComplete, onRevereseComplete or something like that. I don't see anything wrong with using stagger to do that. Keep in mind though that the stagger methods return a series of GSAP instances with different position parameter applied to them, based on the stagger time you provide. I recommend using React transition group only when the animation is related to the component being mounted/unmounted. For example if you want the element to be mounted before the animation starts and unmounted after the animation is complete, or if you're looking for some finer detail control over the lifecycle methods and associate them to the animation, you can use transition group. Other wise my advice is to stick with GSAP and use it in he usual way with react. Transition group might be a little too much if you're just starting with react and GSAP. If the animation only affects the elements in that component, then there's no reason to have it in a different component. If you want to target some specific callback from a parent component in the timeline, then you can pass it as a property. Finally if you need to access the GSAP instance in different components in your app, perhaps you should think about using redux, mobx or some other store solution in order to access the timeline in different components. Now I have never used redux to store a GSAP instance, but I can't think about a reason against though. Happy Tweening!!!

If you wanted to tween the playhead to the frown completion, you'd actually want to tween to the label after the frown because tweening to the actual 'frown' label will take you to the beginning of that morph. Which in this case would be the beginning of the timeline and showing the neutral pose. If you wanted to do this with labels, you'd probably want to move your labels to the end state of each morph. Or maybe have a 'startFrown' and 'endFrown' label so you could tween straight to a label or tween between the start and end states easily. Again though, not terribly efficient for what you're doing here. I'd recommend staying with tweening in the functions. Regarding your glitch and artifacts, I think there's something funky going on with your eye paths. I dropped in two circles to replace your eye paths (used MorphSVG to convert them to paths so your wink/blink morphs would work) and it all seems fine now. Hopefully that helps. Happy tweening.

@Tasty Sites Both x and xPercent animate transform and you wouldn't see performance difference while using either, they both take advantage of GPU. @benoit That seems like problem is you are animating a really large image on weak GPU, I think best way to go would be to use smaller images. You should test some of the demos on your mobile and on your machine so you will get idea about how much workload your machine is able to take. Looking at your screenshot it looks like your machine is struggling to render things properly.

Hello @benoit Looks like this is a performance glitch - I think. Probably because you are using x instead of xPercent witch is better for performance Please take a look at this pen and let us know if it solves the problem Something that also could help if you need more control over the performance https://greensock.com/docs/TweenMax/static.lagSmoothing() I'm not sure how you want to display things in the slider but maybe this small CSS change will help you. If you have any questions, please ask Happy Tweening!

Hi @Mheetu Welcome to the GreenSock forum. What's happening is you're tweening to a label which isn't really the mouth pose you want. For example, you click 'frown' and then move the playhead to the 'frown' label. But that label is actually at the beginning of the timeline so you go past the frown pose and back to the neutral pose because that's what the mouth is doing at the beginning of the timeline. You could make some label changes and make this work, but in this case I'm not sure a master timeline would be the best choice. What I mean by that is what if you had 10 mouth positions and you were on position 10, but wanted to tween to position 1? You'd see all the poses as you tweened the playhead back to pose 1. See what I mean? I think just tweening in the button handling functions would be easier. Something like this: Hopefully that helps. Happy tweening and welcome aboard.

Hi @alfianridwan, no problem at all. I'll break down a few things that are happening here ... First and foremost ... I'm using jQuery to make some tasks much easier. If you're new to JS, you may or may not know the ins and outs of cross-browser compatibility. In short ... jQuery fights that battle for us. So your questions and my answers are addressing jQuery $('document').ready( function(){ Is just waiting for the DOM to be ready before we do anything. $('.blog-card img').each( function(){ So .each() is a jQuery method that allows us to iterate over the matched set ... in this case, all elements returned with the selector ".blog-card img". So what happens here is the DOM is scoured for all <img> within elements with the class ".blog-card". Now that that images are returned as a set, jQuery's .each() will iterate over each one to perform all the actions with the .each(){ }. In plain english, here is what is happening within that, Find the <img>'s nearest (up the DOM tree) enclosing element with the class "blog-card". This is the card that the image belongs to. Within that card, inject an element before all its children ... a new div using the current <img>'s (i.e. the <img> currently being referenced as we iterate with .each() ) src as the css background-image move the <h2> within the card to now be a child element of the new <div class="blog-card-background"> Add in a new div to represent the "close" X in the top of the expanded card. remove the <img> from this card (we no longer need it) Now, for the why to all the above We do this just to make a simple reference rather than asking jQuery to look up the tree many times. In this particular case, the hit is negligible. But it's good practice that if you are going to ask for something multiple times ... simply create a variable to hold it. For me, positioning and animating a div with a background image applied is much easier than positioning and animating the <img> itself. For example ... applying an image as a background with background-size: cover and background-position: 50% 50% tackles so many issues on its own when dealing with responsive images! Because the new <div class="blog-card-background"> is positioned relatively, it allows us to stick the (now) absolutely positioned <h2> to the bottom of the image (with padding) by using the CSS bottom property without any concern for how many lines the <h2> may be. We have to be able to close it! No use in keeping it in the DOM ... we are now using that image as a background for the <div class="blog-card-background"> You'll notice we did a lot of manipulation at this point with jQuery. But why? Why not just do all of this in the markup? Well, for several reasons. If javascript isn't available (or some other script causes it to fail), we want the user to have something that a. looks approriate and functions as expected (i.e. click a blog card and navigate go through to that blog post as a new web page) b. doesn't present interface elements that perform no action My basic rule ... if Javascript is required to interact, then Javascript is responsible for creating the element. So make sure it's usable without JS. $('#some-blog').on( 'click', '.blog-card.inactive', fucntion(){ ... This one is a bit nuanced, but I'll explain here. We want things to happen when something is clicked. Someting "A" when clicked in a "card" state and something "B" to happen when clicked in an open state. Now, I could have simply used ... $('.blog-card.inactive').click( function(){ ... Buuuuut, that does something a bit unexpected. A unique click handler get's bound to each matching element from that point forward .. regardless of losing the "inactive" class down the road. You might say, "that's OK, we're using a different element to close the open state.". And that's true ... but, clicking anywhere else anywhere within, in this example, the open blog post would still cause this handler to fire. We could do some detection to remove this handler while in an open state and rebind after. But it's so much easier to do $('someSharedParentElement').on( 'click' , 'target', function(){ ... because it creates a single handler for all matching elements AND allows the handler to be bound to dynamically created elements down the road! Think of a blog with infinite scroll, for example. And, when the "blog-card" has its class changed from "inactive" to "active", this event handler is no longer bound. When it goes back to "inactive" it is bound Noice!

@yoannes You should look into following thread, I managed to use CCapture demo to capture canvas frames, I have never used headless browser so not sure how it will perform. But you would be better with exporting all screenshots as PNG or JPG and converting them using FFMPEG. Unless of course if headless browser performs better than usual browser. Also you would be able to capture video frames and then svg on top of that, but not sure how you can capture html. A quick search landed me on https://html2canvas.hertzen.com/ which might be what you are looking for.

Ah ha ha, nice! I would love to know what Tesla is using it for!! (time to go pick apart some sites )

"GreenSock! Raising the bar and lowering the barriers." I like that. Maybe the new tagline? Interesting stuff you've been doing with GSAP Shaun. Very creative. My own use is just standard websites so I have no cool use cases to share. In another thread Jack mentioned Tesla was a GreenSock user, but wasn't sure if that was in the cars or not. Wouldn't that be cool if GSAP was powering some of the animations in the actual vehicles?

I think many of us feel that way!! GSAP has certainly raised the bar and lowered barriers!

Ah, okay. Well, I certainly wouldn't call GSAP a "CSS selector" by any stretch. It simply taps into document.querySelectorAll() by default, or jQuery if it's loaded (not necessary). GSAP is solely focused on solving animation problems - it's not really meant to do super advanced selections in the DOM or anything (beyond querySelectorAll() which is typically all you need). I suspect you can do pretty much anything you want animation-wise directly with GSAP. jQuery isn't really focused on animation (though it does some basic stuff...albeit much, much slower). Anyway, let us know if you need anything else GSAP-wise. Happy tweening!

Hm, I don't quite understand the question. @soupking are you asking if GSAP adds some sort of pseudo class to all the elements it animates? No. But you can use the getTweensOf() method and set the "onlyActive" parameter to true. Is that what you're looking for? Maybe it'd help if you explained the "why" behind your question and we could toss some suggestions your way.

Of course I had to listen to the interview right away. So great to hear your story Jack and how you got this all going. I guess the most interesting thing I've done with GSAP so far is a single page microsite that runs as a full window design and uses GSAP to deliver everything to the viewer kind of like an app or a presentation instead of scrolling through content. Nothing revolutionary there many others have done similar but I can say that without GSAP I probably never would have had the confidence to attempt it.

Ditto what @Carl said. Really appreciate the kind words, @PointC.

You can simply put repeat: -1 on the single tween within the timeline. If you want them to do something slightly different you could add a new tween to the end with new property values and repeat that one.

Yeah - the trick is just make sure your circle start point is where you want it to open. There are various ways to go about that. We have a big thread talking about circle start points that you might find helpful too. Happy tweening.

Hi @nmarketti Sounds like the perfect job for DrawSVG. DrawSVG is a Club plugin. More info: https://greensock.com/club Hopefully that helps. Happy tweening.

Try this .. I'm animating the the x property (vs css: { transform: 'translateX'}) and the rotation property (again, vs css:{ transform: 'rotate'}) and it seems to have much better results.

I don't know anything about FB ads, but if you need to create some GIFs from your SVG animations, check out @chrisgannon's SVG2GIF. https://github.com/chrisgannon/SVG2GIF Happy tweening.

I may be way off base here .. but couldn't you simply use a screen capture tool to record the animation to MP4?

Hi Unfortunately I ran out of time to get a proper answer, I'll get back to it later tonight. In the mean time take a look at this: https://reactjs.org/docs/refs-and-the-dom.html This: And this: Hopefully this is enough for now. Happy Tweening!!

So, last night I was listening to Jack's awesome interview with egghead.io (https://itunes.apple.com/us/podcast/egghead-io-instructor-chats/id1308497805#) and he started talking about all the unexpected uses of GSAP, and it got me thinking; what have I used GSAP for? And I realized the range is from pretty typical to not so typical! My line of work is for a few large clients. So I've used GSAP on many projects; some externally facing (marketing sites) ... some for "exclusive" groups (targeted marketing), and many internally facing (for very specific groups ... members and employees). So, for the typical stuff, it's Immersive content UI indicators and helpers UX sauce For the not so typical, it get's pretty varied pretty quick! But the one project that sticks out the most is GSAP as the heart of a frontend delivery system (backed by Drupal) that drives a community cable channel for a gated resort community in GA. The Drupal side allows content managers to create and place 3 types of media; image slideshows, video, and embedded (iframed) HTML. They have control over timings and transitions which map out to GSAP, background audio playlists and ducking (the ducking is tweened with GSAP ), and asset publish/unpublish dates. For the embedded HTML ... they are calling in external sites which are slideshows, but managed by another group for another purpose; a real estate listings slideshow of active properties within the community that is displayed on a large screen in their sales office which is ... you guessed it ... GSAP! It cycles through 280 properties (+/- a few) daily; transitioning in a property image, then a delayed detail and pricing overlay slides over a portion of the image. But back to the cable channel ... every asset and configuration managed on the Drupal side is fed through custom template files that generate all the GSAP Timelines and Tweens. It has been running for years and is rock solid! So, my not so typical uses are cable channel programming (in the sense of delivering programmed content), digital kiosks, and digital signage. So, I'm curious ... what have others used GSAP for that might be a little outside the norm?! Edit: I changed the title from "What have you done with GreenSock?" to "How have you used GreenSock?" Upon reading it back some time later ... it occured to me that the title could be implying that something is wrong with GreenSock Of course there isn't!

Good to know Sahil, always thought the xPercent is the faster one ^^'

Thank you Shaun for your patience and explanation. After a few trial and errors I finally managed to understand the code! Thank you so much once again

@Rodrigo That is an amazing answer, could not wish for better. Many thanks for the help and guidance. GSAP is an incredible community and I am really happy I came and ask questions. I'll come back and post a link to the finished website as soon as it is done. Happy Tweening

Slight clarification for anyone following along. I don't want to confuse anyone. On a regular tween the onCompleteAll goes after the stagger number. TweenMax.staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteAllScope:* ) For a timeline, the onCompleteAll goes after the stagger and position: .staggerFrom( targets:Array, duration:Number, vars:Object, stagger:Number, position:*, onCompleteAll:Function, onCompleteAllParams:Array, onCompleteScope:* ) Happy tweening.

Hi @Zaperela Welcome to the forum. The reason your demo wasn't (kinda sorta) working was the onComplete was in the wrong spot and being called three times. It is a bit confusing, but for stagger tweens the onCompleteAll goes after the stagger number. So what you were seeing was the infinite circle repeat timeline starting before it should have which caused an overwrite. More info in the stagger docs: https://greensock.com/docs/TweenMax/static.staggerFrom() In addition to @Shaun Gorneau's demo or moving that onComplete call on the stagger, you could also move the onComplete to the vars of the cs timeline. Lots of options. Hopefully that helps. Happy tweening and welcome aboard.

I tried forever tinkering with DRAWSvg. Thank you so much!

Shaun, thank You so much! Didn't thought about this. You helped me a lot! Thanks

@DD77 is the slider at the top of the following page similar to what you're looking for? It's a GSAP slider I created about a year ago if you want to pick it a part. https://www.reynoldslakeoconee.com/our-community/blog

Hey Beau, I understand the frustration. The reality of things is that React works in a declarative way and the discourage to use string refs and find dom node has mostly to do with some specific issues and some excessively paternal approach by the React team. The paternal issue comes from the fact that the deprecation of string refs has to do with some edge cases and because of a few things that could go wrong the entire API is changed for everyone. Take GSAP for example, Jack does His best to ensure that GSAP serves as many scenarios as possible but never compromises performance, file size nor legacy support, and when those changes do come, believe me there is a lot of questions and samples going around before the decision is made. But that's how GSAP works and perhaps we've been a little spoiled by that, but that's how serious Jack and Carl are about how this works. IMHO there's nothing wrong with using string refs and fond dome node if you know what you're doing. At some point developers have to take responsibility for the code they write and not expect that the frameworks make all kind of loops and hoops to ensure that every blunder is supported. As I mentioned in another post yesterday this is some very specific issue, because you have to take in consideration the lifecycle of your app and it's components in order to make the best decision. There are some cases that you can safely reference the elements using the classic get element by id if, when you create the variable you're sure that the DOM node will be rendered in the app. In other cases if you're not sure is better to use refs. This simple codepen goes into the detail of how refs are accepted today: In the console you'll find an array with all the rendered elements that can be used with GSAP. This is the so called "React way" for referencing DOM nodes. Now the pain comes when you're using a third party component that doesn't expose the DOM node, like this case: import ThirdParty from "third-party"; const elements = ["label-1", "label-2", "label-3", "label-4"]; class MyApp extends Component{ constructor(){ super(); this.elements = []; } render(){ return <div> { elements.map( e => { <ThirdParty key={e} ref={ node => this.elements.push(node) } /> }) } </div>; } } In this case the array will have a collection of the four React components being rendered and not the nodes being added to the DOM. In this case find dom node comes in handy because it allows to reference the actual element in the screen. If the plan is indeed remove find dome node from ReactDOM then things will get more complicated, because developers will have to bake their own version of this component in order to expose the ref to the DOM node or the developers of third party components will have to come up with some way to find those references. One of the simple ways to do this could be for components to accept an id property in order to later reference that and get access to the DOM node. Finally don't get discouraged from using GSAP with React, there are ways to use it and the more is being used, the React team will become aware that to create complex animations and rich environments GSAP is the way to go and they'll have to come with some way to actually gain access to the dom elements. Right now we have to keep using this type of approaches with the hope that things will change and become simpler in the future. Also keep in mind that the article you mention was written when React was in version 15 and string refs and find dom node were not deprecated and that wasn't a long time ago, unfortunately this world moves way to fast and doesn't wait for anyone... Happy Tweening!!!

It's a little tricky because the current version isn't really built in ES6 modules, thus "gsap" actually points at TweenMax (which contains a bunch of stuff including TweenLite). If you really just want to import TweenLite, do so directly like: import TweenLite from "gsap/TweenLite"; But remember that if you're trying to animate anything DOM-related (typically CSS), you'll need to also load CSSPlugin ("gsap/CSSPlugin"). Also, the size you're seeing is probably uncompressed. TweenMax is under 40k minified and gzipped. Feel free to load it from a CDN instead of bundling it in your JS payload. That's a very popular option.

Had a bit of time this afternoon ... here is a quick crack at it. A few notes ... the HTML, CSS, and JS are setup to support progressive enhancement. If JS isn't available, you'd simply get a tile with a background image and an overlaid title. Clicking would push through the the target URL. jQuery does some restructuring to get better control from both a CSS and a Tweening perspective. I'm also using jQuery to handle the simple click events. I'm sure adjusting some timings (or even tween orders) would produce a better result ... I haven't gotten there yet Big note ... I wouldn't look it here in the embedded CodePen ... I would go out and view it in a narrower viewport.

You can do that by using MorphSVGPlugin, which you will need to convert path data into bezier. Then you can move your element along the path. Check animate along the path section in the end of docs https://greensock.com/docs/Plugins/MorphSVGPlugin

Yep. It's a LOT more complex than you might imagine due to performance optimizations and the flow of code. But I'll spend some more time looking for a way to make it happen (no promises). You can definitely work around it, even in your second example. Here I use an "indexify()" function to which you feed in the elements and the modifiers object and it'll do all that work for you automagically... var elements = [ "#element1", ".stage h1", ".slider .slide span" ]; TweenMax.to(elements, 1, { x: 50, modifiers: indexify(elements, { x: function(value, target, index) { console.log(index, target); } }) }); function indexify(elements, vars) { var a = [].slice.call(document.querySelectorAll(typeof(elements) === "string" ? elements : elements.join(", "))), wrap = function(func) { return function(value, target) { func(value, target, a.indexOf(target)); } }, p; for (p in vars) { vars[p] = wrap(vars[p]); } if (vars.scale) { //scale is an alias for scaleX and scaleY vars.scaleX = vars.scaleY = vars.scale; delete vars.scale; } return vars; } Obviously that indexify() function could be reused as much as you want. Does that help?

@smallio I removed all GSAP libraries from your demo and it still works as it is, so I am not sure how you used draggable on it plus you are not using draggable library in your demo either. Probably you are confusing flickity's draggable with GSAP. Unfortunately I have never worked with flickity so I can't suggest anything to achieve that effect. Maybe you should try flickity's forum, you will find answers there. If you want to go pure GSAP then you might be able to use and modify following demo.

You're a good man @Dipscom. May these brownie points motivate and nourish you on your noble quest. Safe travels my friend.

I believe to call your function you would want to use onComplete or in the case of a staggeroTo I think its onCompleteAll in the tween, OR use onComplete on the timeline. In your case I think you would want it on the timeline(s). var tl = new TimelineLite({onComplete:allDone}) ; or tl.staggerFrom(chars, 1.2, {onCompleteAll:allDone, opacity:0, scale:0, y:120, rotationX:180, transformOrigin:"0% 50% -50", ease:Back.easeOut, delay:9.8}, 0.01, "+=0");

Hey, I'm trying to integrate gsap with react and have managed to look at a few examples and get a simple tween working, however I'm struggling to work out how to animate all squares in my example and not just the last item. I would the same affect to apply to all squares or someway to target each square. I don't really understand what this does, so if someone could explain? 'ref={ a => {this.name = a }' I have created a codesandbox.io pen as this is alot easier to work with for react than codepen but don't seem to be able to embed it https://codesandbox.io/s/l2w1o9n1p9

HI Rodrigo, I'm looking to do a onetime stagger on each element, having each square fly off every 1/10 second. I tried to do it another way using the code below const data = [ {id:1, name: 'box1'}, {id:2, name:'box2'} ] data.map(item => className={styles.box} ref={con => {item.name = con; }} however I then wasn't sure how to reference this into the timeline tl.to(whatGoesHere??, 0.5, { css: { backgroundColor:"#F19939" } }, ) any suggestions welcomed

Yeah, plugins are great when you need to tween properties that contain more than just basic numeric values. We offer a plugin template that has detailed comments to help you along: https://github.com/greensock/GreenSock-JS/blob/master/src/uncompressed/plugins/TEMPLATE_Plugin.js However, if your objects have matching set and get functions like getX() / setX() or getRotation() / setRotation(), GSAP is smart enough to allow you to tween the set functions like: var message = document.getElementById("message"); var obj1 = { position: {x:0, y:0}, setX: function(val) { this.position.x = val }, getX: function() { return this.position.x; } }; //tween the setX() value TweenLite.to(obj1, 2, {setX:200, onUpdate:function() { message.innerHTML = obj1.position.x }}); http://codepen.io/GreenSock/pen/c9538ed6375c49d8190b8fd2dd88c375?editors=001 Also if you have a single setter/getter function that can set or get a value based on the presence of an argument you can use that too! var message = document.getElementById("message"); var obj1 = { position: {x:0, y:0}, positionX: function(val) { if (arguments.length === 0) { //get return this.position.x; } else { //set this.position.x = val } } }; //tween the positionX() function TweenLite.to(obj1, 2, {positionX:200, onUpdate:function() { message.innerHTML = obj1.position.x }}); http://codepen.io/GreenSock/pen/3236625f134a45abcea513b14447b2b7?editors=101 Just sharing this so that you know that just because other libraries may set values via functions, it doesn't mean they can't be used in tweens. However it gets more complicated if something like setPosition() requires or returns both x and y values.