supermoos

Hi, I was seeing a sudden fps drop and stuttering on my new iPhone 14 pro for demos that previously ran smooth, so I suspected that iOS 16 (safari 16) was to blame and perhaps not the new phone's hardware. I recorded how the above "fixed" demo runs on my iPhone 14 Pro, is it expected to be so laggy or is the fix perhaps not fixing everything? This is the exact link I used for testing: https://codepen.io/GreenSock/full/PoOpobM Here's a demo video: https://www.dropbox.com/s/t3wr3cj048jvrmm/RPReplay_Final1663849586.MP4?dl=0

Thanks! Just the example I was looking for.

I was wondering if there's a way to animate the path used in conjunction with the MotionPathPlugin. If I for example have items animating around in a circular path, and then I want to animate that path down to be a straight line while the objects following the MotionPath animation seamlessly follows the new path down to the straight line?

Seems like a fantastic plan And thank you for taking the time to discuss this matter!

Hi Jack and Rodrigo Thanks for your lengthy reply, nice to see how much effort you put into support! In regards to 1: I definitely undestand your thoughts about TweenMax from an ad developers perspective. I'm however not developing ads, and don't benefit from the caching since we bundle most of our source code up. 2. point: This one I see as a problem, I remember this problem from the flash days of using greensock, not getting why something wasn't tweening, just to realize I had forgotten to import (or activate) the right plugin. However, this is something you rather quickly learn after having hit this problem a few times. And could potentially be solved by having console.log's for tweening values that are in an un-included plugin. These console.log's should not be in the minified / production code. I don't know if this would have to much of a performance impact / bloat the code even more, but maybe it could be in a debug-plugin? And yeah, definitely keep prioritizing performance, ease-of-animation over pure kb's - gsap is amazing, and I agree that the 33kb subjectively isn't a lot, but I was basically just trying to optimize my build, so that importing TimelineMax might have TweenMax as it's dependency. Then it would be auto-imported (along with TweenMax's dependencies, CSSPlugin etc.). This should be possible with ES6 modules.

Hi Rodrigo, I'm aware of using that as a workaround, but still, isn't it weird for TweenMax to also include TimelineMax by default, or is that just me?

Okay, with the risk of having missed something (again ) I have a question: If I only import TimelineMax from TimelineMax.js, this code won't work: var timeline = new TimelineMax(); timeline.to(document.body, 1, {backgroundColor: '#ff2080'}); timeline.to(document.body, 1, {backgroundColor: '#000000', yoyo: true, repeat: -1}); However if I also import TweenMax from TweenMax.js it now works. The thing is though, that it also works, if I only import {TweenMax, TimelineMax} from TweenMax.js - so isn't the code for TimelineMax duplicated into TweenMax.js, does doubling the code payload to include it? Essentially making it impossible to optimize the amount of code you import to only TweenMax and TimelineMax?

Arh, okay. I was under the impression that TimelineMax depended on TweenMax, and TimelineLite on TweenLite. Glad to get that cleared up.

Looks like it's partly working, I can do this: import TimelineMax from 'gsap/TimelineMax'; And with JSPM it will import Tweenlite.js also, but looks like TimelineMax doesn't define TweenMax as a dependency - should it do that? Simple things like this work (except for the yoyo and repeat part): var timeline = new TimelineMax(); var valueProxy = { x: 0 }; timeline.to(valueProxy, 1, {x: 100}); timeline.to(valueProxy, 1, {x: 0, yoyo: true, repeat: -1, onUpdate: ()=> { console.log(valueProxy.x); }}); but this doesn't: var timeline = new TimelineMax(); timeline.to(document.body, 1, {backgroundColor: '#ff2080'}); timeline.to(document.body, 1, {backgroundColor: '#000000', yoyo: true, repeat: -1});

Just tested, and the imports work, but as you mention, it imports a lot of other unneeded stuff with the current setup. I get TimelineMax imported (because it's in TweenMax.js), which unnecessarily bloats my build file. I'm using JSPM 0.17 beta for reference. Will try the direct path ref to avoid these extra imports.

I've tried to do this: import {TweenLite, TimelineLite} from 'gsap'; I'm using JSPM and SystemJS to load modules, however it just always loads TweenMax.js and not TweenLite.js and TimelineLite.js - do you have an example of a working setup, doesn't have to be with JSPM.

YES, please! Or add the TypeScript declaration file to the NPM repo.