Leaderboard

Hello The only way to find a solution is to look in your web inspector in the network tab JS selected. And see the order of the scripts loading, making sure it loads all the GSAP scripts with your custom GSAP JS loading last.. after all GSAP JS like TweenMax and DrawSVG. If you don't see them in the proper order that means your custom code might be running before GSAP code is loaded. Or the DOM (svg) isn't ready or loaded for the code to execute on. When I look in the browser inspector on your site, I see the order of GSAP and Custom scripts like this: ScrollToPlugin.min.js greensock.js TweenLite.min.js custom.js TweenMax.min.js DrawSVGPlugin.min.js So as you can see your custom.js is loading before TweenMax.min.js and DrawSVGPlugin.min.js, that's why it doesn't animate. Also you don't need to load TweenLite.min.js since your loading TweenMax.min.js which includes TweenLite. You need to adjust that with the WordPress API methods .. like the add_action() method to change the priority of the order of enqueued scripts: http://codex.wordpress.org/Function_Reference/add_action And my StackOverflow answer regarding this: http://stackoverflow.com/questions/19913960/enqueue-wordpress-plugin-scripts-below-all-other-js/19914138#19914138

Look at the function I posted in your other thread. That is what tweening is based on. Although a tween might have an extra parameter, which you would divide to get the progress. // t: current time, b: beginning value, c: change in value, d: duration function linearTween(t, b, c, d) { return b + c * t / d; } function lerp(start, end, progress) { return start + (end - start) * progress; } So there has to be a definite start and end. And we can't assume 0 to be the initial value. If there is no initial value, what you're trying to target might not even exists. That happens to be case for a lot SVG attributes. Some properties and behaviors do not get initialized until an attribute is actually placed on the element. And I really can't think of too many things that I would actually tween to or from 0. Opacity, x, y, and rotation are the only ones that I can think of at the moment. And the border tween works because there is a border color. It's yellow. GSAP looks at the computed style for values to tween from/to.

Hi @Joseph Levin Welcome to the forum. Looks like I'm late to the party and many of the GreenSock Greats have already answered, but I'll throw my two cent demo into the mix. Though, with all the geniuses already present in this thread, my two cent demo may only be worth a penny. Happy tweening and welcome aboard.

There's no magic going on. You're just losing track of the index because of this. currSlideIndex++; Keeping track of stuff that can be cycled in any direction can be tricky. For something like this, I like to use a circular linked list instead of an array. A linked list is just a collection of objects that point to the object before and after it. var obj1 = { prev: obj3, next: obj2, data: "foo" }; var obj2 = { prev: obj1, next: obj3, data: "bar" }; var obj3 = { prev: obj2, next: obj1, data: "baz" }; So if you were working with obj1, and wanted to get the data from obj3, you could do this. var data = obj1.prev.data; // "baz" Likewise, if you were working with obj3, and wanted to get the data from obj1, you could do this as it's circular. var data = obj3.next.data; // "foo" That circular structure could really simplify your demo. You only need to keep track of 1 slide. When there is left of right swipe, you just get the prev or next slide from the current slide. There's nothing else to track or update.

i went ahead and copied the css from your site and a few divs that had inline styles applied via GSAP and pasted them into a CodePen: Open that in Chrome and Safari and you will see there is a variance in the vertical placement. As you can see, identical code is rendering differently in different browsers. GSAP will only animate the values you tell it to, it can't control how the browser will interpret those values. It might be worthwhile to take some time and figure out the css end values that render consistently cross-browser and then plug those into your animation code.

Hi Semblance, Carl is on the absolutely correct path - including the trail and error aspect. Just for a start here a red tulip: Happy swaying ... Manfred

Lerp it! This is what drives most animations and graphics, linear interpolation. function lerp(start, end, progress) { return start + (end - start) * progress; } All it does is find a value in a range based on a percent. If you're moving from 0 to 300 and you're 50% the way through, how far along are you? var x = 300 * 0.5; // 150 What if you started at 50 instead of 0? var x = 50 + (300 - 50) * 0.5; // 175 You've probably written a lerp function without even knowing it. Random returns a value between 0-1, so it's just like a percent. function random(min, max) { return min + (max - min) * Math.random(); } However, lerp isn't too exciting on it's own. After all, it's the same thing as a linear ease. But we can make it exciting. Lerp a target value with the same progress to create a natural looking ease out animation. You can do the same thing for your scrolling animation. You just need some value to chase after. Really simple example using the modifiers plugin. Watch as the pink circle chases after the blue circle. And for more ideas on how you can use lerp, check out my ModfiersPlugin collection. Almost every demo uses it in one way or another. http://codepen.io/collection/AWxOyk/

Can you make a demo showing the performance problem? Alpha and scale are slow to do on the CPU, but they are usually done on the GPU now, along with other transforms (x, y, rotation, skew). But if you are changing something else, like say the background color, then the texture running on the GPU is no longer current, and must destroyed. The browser now has to generate a new raster or whatever you were animating, and upload it back onto the GPU. This can be a huge bottleneck. And canvas is definitely the way to go if you don't like dealing with performance issues. Check out the performance timeline of the animation @Carl linked to above. This is with several thousand animations running, and as you can see, there is a whole lot of NOTHING going on. GSAP is doing most of the work, but it's idle most of the time. There's enough time in between frames for GSAP to take a nap. Pixi is doing even less work. It's just sending the changes made by GSAP to the GPU, which is where the magic happens. Once on the GPU, there are special math functions that run on the hardware as electrons, rendering stuff at the speed of light!

Craig, Your demo loops, while I wish mine to end when the last animation has occurred. I modified the code in your pen like so: if ($(this).index() === 0) { i > 0 ? i-- : i = 0; morphIt(); } else { i < max ? i++ : i = max; morphIt(); } And that gets me the end points I was looking to hold on to. I realized that if my order changed with the static definition of my array, I'd have to redo all of the indices, and that is no good. So I changed my array to push the data in: var slideArray = []; //slots in the 1,2,3,4,5 areas may be for future use slideArray.push(['#drupal',1,2,3,4,5]); slideArray.push(['#twitter',1,2,3,4,5]); This way, if I delete, add or re-order items I don't have to reindex manually or worry about what comes before or after each item in the array. I will push forward (no pun intended) and see what I can get to work. Thank you all for your help today! (Just a side note- I am majorly impressed with how fast I have received responses here in the GS forums, and also how helpful the replies have been! Y'all and GS rock!)

With issues like these its probably best to just set up simple "next" and "previous" buttons so that you can test the basic logic. Earlier today i saw the swipes working a little and now they aren't. Perhaps you are editing the pen or something. Regardless, I think you want to get away from dynamically setting a firstSVG property and morphing it into a secondSVG. You should have some "base" shape that you morph into other shapes depending on which direction you swipe. Check out this demo below. Press the buttons. I am always animating the circle into the requested shape. Never animating elephant into hippo or hippo into star. Circle is always the target of the tween. I haven't been able to study your demo in depth so perhaps you have different needs. Feel free to clarify or reduce the demo further to illustrate the issue.

The good news is that GSAP does significant performance optimizations under the hood such as converting 2D transforms to matrix3d during the animation and avoiding layout thrashing. Layout thrashing happens when there are multiple, alternating read > write > read > write operations on the DOM. GSAP will make sure all the writes happen after all the reads. There aren't too many silver-bullet solutions that are going to solve all problems or work the same across all hardware. There are probably enough good ideas out there to write a short novel, but it would be hard to cover all those things in a thread like this. You will probably see the worst performance on opacity changes on many large things (just like in Flash). GSAP is highly optimized though to execute thousands of property changes per update but the bottleneck will always be the browser's ability to render those changes. If you need to animate a ton of things at once, it will be best to use GSAP with your canvas library of choice. Here is a great demo from Blake that exhibits some blazing speed using GSAP and Pixi.js

Happy to help. It's kind of funny that you changed it to end at the last morph as that's how I originally wrote it and then changed my mind because it seems like almost everyone wants some kind of circular slideshow. I'm glad you found an answer that will work for you. Good luck with your project. Happy tweening.

Great question. We anticipated folks wanting to morph back to the original shape sometimes, so MorphSVGPlugin actually saves a copy of the original path data as an attribute on the element itself, and then when you tween to the same target (like .to(yourElement, 1 {morphSVG:yourElement}), it pulls the data from that saved attribute. Does that answer your question?

Hello @kreativzirkel Regarding your question, Why does GSAP need a from value? Just keep in mind.. That when using a from() or staggerFrom() tweens should at least have the ending value defined, meaning you place the element with your defined CSS where you want and it will animate from the values, in the from() tween, to your already defined styles in your CSS or using a set(). When using a to() or staggerTo() tween you should ALWAYS either have the initial staring value defined in your CSS style sheet or use the GSAP set() method to define that initial CSS value. But that should be standard best practice so your starting initial value is always defined before animating with any type of to() tweens. So your initial value is always defined either by your style sheet or via JS using the GSAP set() method before running the to() tween(s). Since GSAP has no way to know what your initial value might be since any animation project could have the element or object start at any value not just 0. When GSAP would try and lookup a specific CSS value especially that is not defined, the value could be undefined since it is not defined in the DOM properties style property. Not all CSS values have an initial value of 0 or none. For example CSS filter() that are not defined have an initial value of none. So you cant animate a keyword value of none since it is not a number, but a keyword. If GSAP had to keep track of every CSS property and their initial value, it would bloat the CSSPlugin quite a bit in file size. So either way you should always define your starting initial value in CSS or set() for to() or staggerTo(). Or define your ending value in CSS or set() for from() or staggerFrom() tweens. Dont leave it up to the browser to report back a proper initial starting or ending value. Define it yourself If you don't like to define your starting value when using the to() or staggerTo(), from(), staggerFrom() tween, then just use a fromTo() or staggerFromTo() instead and you can define both starting and end values in the same tween. Resource: GSAP set() https://greensock.com/docs/#/HTML5/GSAP/TweenMax/set/ Happy Tweening

Thanks Carl, I think I know how to fix this. That is to change my animation strategy.

Unfortunately, it isn't very practical for us to dig through a live site trying to find the js and css responsible for the problem. CodePen or jsfiddle are much better as we can actually edit the code and test our theories. Please provide a basic CodePen with just enough JS, HTML and CSS to illustrate the problem. We don't need to see things in the context of a fully interactive demo as there will likely be tons of code not related at all to the problem that we will need to sift through. The simpler your demo the better. From your description it should be as simple as a single tween. Thanks!

Thanks for the clarification. I agree it is great value , thank you for all your hard work.

I just saw that error on Plunker using SystemJS, so it's not isolated to webpack. Unfortunately, it crashed before I could save it. For some reason, it's not being exported correctly. It should be like this... import SplitText from 'gsap/SplitText'; var split = new SplitText(myElement); When I saw the compiled code, it was adding default to it. So it looked like this. var SplitText_1 = require('gsap/SplitText') var split = new SplitText_1.default(myElement) I added braces just to see what would happen, and there was a correct looking name, but that's when it crashed. import { SplitText } from 'gsap/SplitText'; var split = new SplitText(myElement); // Compiled to... var SplitText_1 = require('gsap/SplitText') var split = new SplitText_1.SplitText(myElement) I remember a similar issue for somebody using browserify, but I can't find it. If I remember correctly, it was reversed from this. The person was use braces for their imports when they shouldn't have, which was adding the default name to their imports. Not sure what's up. It seems like SplitText has a different scope.

I'd love to help, but it's rather difficult without a reduced test case. Can you provide a simple codepen (or jsfiddle) that demonstrates the issue so that we can poke around and see what's happening?

While I can't spend the time to optimize right now ... this might point you in the right direction.

yup, in addition to PointC's great advice, I think CustomWiggle's "anticipate" type is pretty close to "tada". See demo here: https://greensock.com/customwiggle (section CustomWiggle Types)

Most of those effects are just using combinations of position, scale, rotation and opacity. Here is a demo of the two you mentioned. You should be able to fork that demo and start experimenting. If you're just getting started with GSAP, I'd recommend some blog posts: https://greensock.com/jump-start-js https://greensock.com/get-started-js Also, take a look at the JumpStart Collection here: http://codepen.io/collection/ifybJ/ Happy tweening.

Macs really aren't designed for touchscreens. It sounds like it's treating the monitor as basic input device. But you won't have that problem with Windows, especially if you are using Edge. Edge also uses Pointer Events instead of touch events, which are much better as they combine mouse, stylus/pen, and touch into a single event. Check out this screenshot I just took on a touchscreen. It recognizes all 10 of my fingers and my mouse. Here's a good site, with a bunch of touch demos to test out. https://patrickhlauke.github.io/touch/ This is the demo I used for that screenshot. See what it shows on your Mac. https://patrickhlauke.github.io/touch/tracker/multi-touch-tracker-pointer-hud-pep.html

You don't need to use Draggable for scrolling with touch monitors. Scrolling should work just like your phone. IE and Edge probably provide the best user experience in this regard, and have a built-in overscrolling effect. And yes, youMightNotNeedScrollMagicIfYouUseGSAP Really simple. Say you want an animation to start at 2000px for a duration of 500px. This is all you need to do. var tl = new TimelineMax({ paused: true }) .to(".foo", 500, { x: 100 }, 2000); // And then in a scroll event handler function onScroll() { tl.time(window.pageYOffset); } That's it!

Hi reubenlara Welcome to the GreenSock forum. You can add a function using the add() method, but it doesn't take parameters. Please use the call() method like this: // change this .add(insertBG("01.png",".testcard"), "scene01") // to this .call(insertBG, ["01.png",".testcard"], this, "scene01") That should get you working correctly. Here's some more info about call() https://greensock.com/docs/#/HTML5/Animation/TimelineMax/call/ If you have other questions, it's usually best to start a new topic. When you post on the end of a thread that is marked answered your question could get overlooked and we want to get you the best answers possible. Hopefully that helps. Happy tweening.

Yep, Carl is right - it's tricky because there are overlaps in SVG between attributes and CSS properties. You can easily control which ones you want to tween in GSAP by segregating them into either css:{} or attr:{}. By default, for example, if you animate the "x" of an SVG and you've got CSSPlugin loaded, it'll assume you want to animate the transform (translateX()). But if you want to animate the "x" attribute, you can just use attr:{x:100}. And "fill" is both an attribute and a CSS property. So once again, GSAP assumes you want to animate the CSS property but you can easily tell it to do otherwise by wrapping it in attr:{}. There's no "r" css property, so that's why you can't just natively animate that via CSS (gotta use AttrPlugin). Does that help at all?

jniac, Yes, it is a little tricky with svg as things like fill are both attributes and also css properties. In your demo it's important to note that the tween set an inline style for the fill which has more specificity than the attribute. After the tween the circle looks like this: <circle cx="50" cy="50" r="5" fill="#FF0055" style="fill: blue; opacity: 0.5; transform: matrix(0.5, 0, 0, 0.5, 12.5, 12.5);"></circle>