Leaderboard

Hi Guys, just here to say hello and thank you. It's two weeks I'm working on a JS project with a lot of GSAP and... I didn't have to ask anything . All I need is in this forum. Merci!

Hello Fellow GreenSockers, @GreenSock (Jack) has made a new Learning page. Over the years Jack has "whipped together" various GSAP-related helper functions for community members, so we gathered them into one place for convenience. Enjoy! https://greensock.com/docs/HelperFunctions That's it for now, but we'll keep adding relevant helper functions here as we craft them. Happy Tweening!

Welcome to the forums, @mosk. And thanks for being a Club GreenSock member! There are actually a lot of ways to accomplish this. You don't need a loop at all. Here's one way to do it: https://codepen.io/GreenSock/pen/11be77c0a93fbec853c7692a96b19985?editors=0010 The pertinent code: var mySteps = 7, durationPerStep = 1, pixelsPerStep = 200, tl = new TimelineLite(); tl.to("#square", durationPerStep * mySteps, {x:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}) .to("#square", durationPerStep * mySteps, {y:pixelsPerStep*mySteps, ease:SteppedEase.config(mySteps)}, durationPerStep / 2); Does that help?

Nice detective work Jack

Yup! Solves the problem. Thank you for your quick responses.

Aha! I see the problem. GSAP does a ton of work to manage conflicts and ensure that things run smoothly even if you interrupt things mid-tween. One of the things it does in the case of a className tween is to see if there's already one running on that element, and clear things properly (which likely involves editing/reverting inline styles). To work around some browser inconsistencies and ensure that things render properly, it records the element's cssText (all the inline styles) and then after it does its work of applying the new class and analyzing the differences in all the properties, it re-applies that cssText. In your case, that entails background-image too but you've actually got a URL that changes the image supplied randomly! You can get the exact same effect by removing TweenMax altogether and simply doing: //doesn't change anything, but the browser re-loads the background-image if you've got cache disabled: elem.style.cssText = elem.style.cssText; I'll add a line to CSSPlugin that only runs that code if the recorded value is different than the current one. Seems to resolve this edge case. You can preview the next version of GSAP (uncompressed) here with that change in place: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js Better?

If you really wanted to continue to do it using two separate .to calls, you would have to change them to keep the same rate of travel by calculating the animation duration yourself (as far as I know). I'm assuming you want the speed of the second .to below: You know the following information: the distance of the first (400) which I will call d1, the distance of the second (deviceWidth) which I will call d2, and the speed of the second (2 seconds) which I will call t2. Thus you can set up an equation like so: rate = d1 / t1 = d2 / t2. Solving for t1, we get t1 = d1 * (t2 / d2). Filling in what we know, we get the following: this.tl .from(this.moped, 400 * (2 / deviceWidth), { x: '-400', ease: 'Linear.easeNone', }) .to(this.moped, 2, { x: deviceWidth, ease: 'Linear.easeNone', }); Which gives us this demo

Yes - thank you. Went through that code along with some videos and written documentation, and that helped things gel quite a bit.

That's great, @st3f! I sure appreciate hearing things like this, and thanks for joining Club GreenSock! Let us know if you have any questions. We're happy to help. Enjoy!

FYI, this is in GSAP 2.1.3 which is now released. ?

Shaun! You are an absolute legend! Thank you so much. I know what you mean about the duplicate code but I ended up doing that cus I couldn't get it to work in a more consolidated way. I'll implement this and see what I can do to simplify it. Thank again

Hi @Ikai, We turned a corner! With a little help from my friends - super @Dipscom. Or with the words of Jim Morrison ... https://codepen.io/mikeK/pen/WBEQLq Happy tweening ... Mikel

Guys it's solved. Thanks to @Dipscom pointing out the reason the boxes were moving because of the relative units in the Tween. I tested it a gazillion times to make sure the boxes did not move out of position and it passed. Thank you @mikel you have been super helpful. Thank you all for your time and effort! https://codepen.io/ikaizen/pen/ZNJzvm

Hi @Special, Welcome to the GreenSock Forum. We are specialists in animations but not the official forum for ScrollMagic. Just for fun: https://codepen.io/mikeK/pen/rgwRZL More about GreenSock e.g. here: 3D Transforms Or better here: get started Happy tweening ... Mikel

You might want to start a new post for this as it attached to a very old one. As far as the issue goes it suggests that something is causing the text to change and reflow after document ready which I presume is what you mean by ready. It's generally better to setup animation after window.onload that way all elements should be loaded, also make sure that the splittext script runs after any other scripts that may affect the text or any containers it might be in. Without a working example it's kind of impossible to diagnose further.

Hi @andystent, There's a lot going on in your pen .. and a lot of duplication of work which could be greatly simplified. That said ... consolidating everything (kind of as is) into single calls will make one button press control two sets of tweens. https://codepen.io/sgorneau/pen/mYwOdP?editors=0110 But, you should look at refactoring your code to get rid of unnecessary complexities.

Just finished up these beauties. Was a collaboration effort, and I built out the random/dynamic leave animations for both... http://rabondigital.com/html5/goco/discover/index.html http://rabondigital.com/html5/goco/taleoflove/index.html Enjoy!

Hey fellow GreenSockers, I’ve seen some demos and questions lately with SVGs containing nested groups that are 10 deep and generic class names that aren’t helpful. This makes your job tougher, so I thought I’d share a few tips for better SVG exports from Adobe Illustrator. I’ve created a simple SVG with a background rectangle, some ungrouped squares, a group of circles, a group of lines and one open wavy path. Here’s the artwork with the layer panel in AI. Tip 1: IDs If you have elements that you know you’ll be targeting individually, give them an ID in AI. In this case I’ve given each of the colored squares a name. I’ve also named the wavy open path. Tip 2: Grouping If you have a group of elements that you’ll want to stagger or somehow target as a group, create a group for them. Simply select all of them and pressing Ctrl + G will make a group for you. You can also create a sub-layer and add them to it or create an entirely separate layer. Do whatever works for you. Just get them grouped before export. You can see in my layers panels I have a masterGroup around everything and then nested groups around the straight lines and circles. The elements in those groups do not need an ID as I’ll have no need to target them individually. You can also use nested groups within nested groups. Maybe a character has a group called ‘#face’, but the eyes need to be their own group within the face group. If that’s what you need for control, go for it. Tip 3: Export Settings Choose File –-> Export –-> Export As --> then choose ‘Save as type: SVG’. The directory is unimportant as you won’t actually be saving it. Choose Export at the bottom of that panel and then we’ll get to the important settings. The next screen you’ll see will be for the SVG Options. At this point you could choose OK and the file would be saved, but I find it best to click to ‘Show Code’ instead. That will launch a text editor which will allow you to copy and paste the code into your editor. Make certain the Object IDs is set to Layer Names. If not, the group names and path IDs will not come through to the SVG. The most important setting here is the Styling. If you choose: Internal CSS, you’ll get a bunch of generic class names. The IDs will still come through, but I don’t find generic class names helpful at all. Here’s what you get with that export. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <defs> <style> .cls-1 { fill: #333; } .cls-2 { fill: #ff0; } .cls-3 { fill: #7ac943; } .cls-4 { fill: #3fa9f5; } .cls-5 { fill: #ff931e; } .cls-6 { fill: none; stroke: #e6e6e6; stroke-miterlimit: 10; stroke-width: 4px; } </style> </defs> <g id="backgroundGroup"> <rect id="backgroundGray" class="cls-1" width="1000" height="500"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle class="cls-2" cx="650" cy="150" r="50"/> <circle class="cls-3" cx="650" cy="350" r="50"/> <circle class="cls-4" cx="850" cy="150" r="50"/> <circle class="cls-5" cx="850" cy="350" r="50"/> </g> <rect id="greenBox" class="cls-3" x="100" y="100" width="100" height="100"/> <rect id="blueBox" class="cls-4" x="100" y="300" width="100" height="100"/> <rect id="orangeBox" class="cls-5" x="300" y="100" width="100" height="100"/> <rect id="yellowBox" class="cls-2" x="300" y="300" width="100" height="100"/> <path id="wavyPath" class="cls-6" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43"/> <g id="straightLines"> <line class="cls-6" x1="450" y1="100" x2="450" y2="400"/> <line class="cls-6" x1="500" y1="100" x2="500" y2="400"/> <line class="cls-6" x1="550" y1="100" x2="550" y2="400"/> </g> </g> </svg> For styling I prefer to set it to Presentation Attributes. Here’s what you get with that setting. <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="500" viewBox="0 0 1000 500"> <g id="backgroundGroup"> <rect id="backgroundGray" width="1000" height="500" fill="#333"/> </g> <g id="masterGroup"> <g id="nestedCircles"> <circle cx="650" cy="150" r="50" fill="#ff0"/> <circle cx="650" cy="350" r="50" fill="#7ac943"/> <circle cx="850" cy="150" r="50" fill="#3fa9f5"/> <circle cx="850" cy="350" r="50" fill="#ff931e"/> </g> <rect id="greenBox" x="100" y="100" width="100" height="100" fill="#7ac943"/> <rect id="blueBox" x="100" y="300" width="100" height="100" fill="#3fa9f5"/> <rect id="orangeBox" x="300" y="100" width="100" height="100" fill="#ff931e"/> <rect id="yellowBox" x="300" y="300" width="100" height="100" fill="#ff0"/> <path id="wavyPath" d="M68,457c45.67-15.25,115.6-33,201-31,84.49,2,104.92,21.37,193,25,108.61,4.48,136.93-22.58,236-28,61.7-3.37,150.91,1.64,262,43" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <g id="straightLines"> <line x1="450" y1="100" x2="450" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="500" y1="100" x2="500" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> <line x1="550" y1="100" x2="550" y2="400" fill="none" stroke="#e6e6e6" stroke-miterlimit="10" stroke-width="4"/> </g> </g> </svg> The output is much cleaner and any of those attributes can be easily controlled with CSS or GSAP. This code straight out of AI is ready to animate with no cleanup necessary. You can quickly target those group child elements for whatever you need. It’s the best of both worlds as you can get to each element for a stagger without the need for unique IDs and you can also control them as a collective. The nested circles can be targeted like this: tl.staggerFrom("#nestedCircles circle", 0.5, {attr:{r:0}}, 0.15); Or easily targeted as a group: tl.to("#nestedCircles", 1, {svgOrigin:"750 250", rotation:360}); Bottom line: Better artwork prep will make your GreenSock life easier. Proper names and grouping before you export will make your animation work go faster as you won’t have to fumble with meaningless class names and trying to group things in your code editor. That’s not to say that you can’t tweak a few names or groups – I do that all the time. But the more things you can have exported from AI correctly, the easier your coding and animation work will be. Of course, all this is just my two-cent opinion. Take from it what you will. Hopefully some of it will be helpful. Happy tweening.

@Sahil Don't know if you know about Draggable's deltaX and deltaY properties. It will give you the amount of change, so some of your functions could be changed to. function updateRight() { TweenMax.set($container, { width: "+=" + this.deltaX }); } function updateBottom() { TweenMax.set($container, { height: "+=" + this.deltaY }); } function updateTop() { TweenMax.set($container, { height: "-=" + this.deltaY, y: "+=" + this.deltaY }); } function updateLeft() { TweenMax.set($container, { width: "-=" + this.deltaX, x: "+=" + this.deltaX }); } Here's an example from the thread I linked to above. I'm using bounds like normal. You can probably do the same with Sahil's version by using elements in the DOM instead of proxies. To use elements in the DOM for resize handles, you'll need to stop propagation of the onPress event. Draggable.create(handle, { bounds: container, onPress: function(event) { event.stopPropagation(); } }); You can also liveSnap/snap to points now. See the demos at the bottom. https://greensock.com/1-20-0

I got curious about this and enjoyed the challenge of making it into a single function that'll handle any number of points for you, so you can just feed in the string you want, the stagger, duration, etc. and it'll automate everything and spit back a TimelineLite instance containing all the animation Here's a forked version of Carl's: http://codepen.io/GreenSock/pen/fbb9dd44bf1c98a9842a6c05d6c1be2b?editors=0010 //this one function call does it all: staggerPoints("#hi", 2, {points:"100,-50 400,0 600,100"}, 0.5); //the work is done in this one function that spits back a TimelineLite. function staggerPoints(selector, duration, vars, stagger, onCompleteAll) { var numbersExp = /(?-)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig, element = document.querySelector(selector), startPoints = element.getAttribute("points").match(numbersExp), endPoints = vars.points.match(numbersExp), applyPoints = function() { element.setAttribute("points", startPoints.join(",")); }, copy = function(obj) { var o = {}, p; for (p in obj) { if (p !== "points") { o[p] = obj[p]; } } return o; }, tl = new TimelineLite({onUpdate:applyPoints, onComplete:onCompleteAll}), l = startPoints.length, obj, i; if (l !== endPoints.length) { console.log("Error: point quantities don't match"); } for (i = 0; i < l; i+=2) { obj = copy(vars); obj[i] = parseFloat(endPoints[i]); //note: we need to make sure the values are converted from strings to numbers. obj[i+1] = parseFloat(endPoints[i+1]); startPoints[i] = parseFloat(startPoints[i]); startPoints[i+1] = parseFloat(startPoints[i+1]); tl.to(startPoints, duration, obj, stagger * i); } return tl; } Play around with it and let us know if it works okay for you.