Leaderboard

Hi and welcome to the GreenSock forums. First I love the avatar!!!! Second, yep there's a lack of documentation for GSAP + React / React Native out there. Unfortunately tools like Pose and Transition Group help only with simple tasks, when the time comes to make complex animations things get a bit complicated. There is (actually was) a tool for that (https://github.com/azazdeaz/react-gsap-enhancer) but is no longer maintained so not much to do there. Also in this scenarios we run into React's declarative nature, which is quite unique and the fact that the React team doesn't help too much in getting access to the DOM elements. In fact I've read some comments and Tweets from Dan Abramov (creator of Redux and part of the React and React Create App teams), where He declares that accessing the DOM nodes should be a no-no and that is anti-pattern. Obviously Dan hasn't done a single complex animation in His life on a React app ;). Back to the issue the most robust tool I use (and that's just one guy's opinion) is React Transition Group (RTG), because it takes care of the DOM operations and reconciliation when the components get mounted, unmounted, updated, etc., so with it we can take care of only creating our GSAP code. The caveat (there's always one of those, right?) is to create the transition component to use GSAP in it, but once you get the hang of it you'll see is not too complicated because RTG's API is quite simple. Here are some samples using GASP with RTG: Simple list of elements (this has some commented out code, that's the code to use... [sigh] CSS Transitions, but the sample actually uses GSAP) https://codesandbox.io/s/7lp1q8wba Mount / UnMount a component https://codesandbox.io/s/yvye9nnw Draggable Rotation https://codesandbox.io/s/jrkbkxeqy Now the first two need a major update because they're using React 15.x, when you could still use string refs for the dom elements. Now a days you need a different approach for it, like this: But updating it shouldn't be too complex. If you still find some issues on the road, please don't hesitate to create a codepen or sandbox to get a look at it. The idea is to encourage people to keep using GSAP and spread it as the standard for web animations. Happy Tweening!!!

IE, Edge, and Firefox all have various bugs related to these types of animations which DrawSVGPlugin works around. That's why @Sahil recommended getting a Club GreenSock membership so you can use it. You can try it for free here: https://codepen.io/GreenSock/full/OPqpRJ/ Examples of the bugs: if you call getTotalLength() on a <path>, IE locks the repaint area of the stroke to whatever the current dimensions are on that tick. Firefox throws errors if the element isn't visible. Edge won't repaint things correctly if stroke-linecap isn't a particular value, and some browsers render artifacts if there's a very small dash. Again, we've implemented various workarounds in DrawSVGPlugin to solve all of these things - that's why we don't recommend doing a raw strokeDashoffset animation. Happy tweening!

If you're just trying to randomly select a new x position from an array and tween there, I think this would be a much cleaner approach: (there's no need to keep a reference to the old tween, invalidate() it, and restart() it). But if you really need to reuse the same tween instance for some other reason, you could do this: Does that help?

Glad to help Sorry I dont have access to Safari on Mac OsX, so i was unable to debug that to fix. For Mac OsX Safari, You could still increase your z (translateZ) value so it pushes the layer forward and out of the intersection of the rotated image. And then only add if Mac OsX. I believe the CSS rule for targeting only Safari Mac OsX is the following but i don't have a Mac OsX to test the following on: _::-webkit-full-page-media, _:future, :root { /* Safari 7.1 - 8.0 (Safari 7.1+) */ /* add extra transform: translateZ() value here for Mac OsX Safari */ } Happy Tweening!

I am not sure what is going on here but but IE is doing really weird stuff. I would definitely recommend getting club membership and using drawSVGPlugin. I reduced the demo to 2 paths and I am noticing following behavior, If I don't use getTotalLength method then animation works but ofcourse you want to get length of path so not the solution. If I remove stroke-width from path then animation works even if I use getTotalLength. So basically using getTotalLength and stroke-width together causes animation to freeze. If I use both and instead of animating single path if I animate all paths then animation works. If I remove all other paths and use 'path' query selector then animation freezes again. I tried using different svg and it behaves same @GreenSock what is going on here? This has to be weirdest thing I have seen so far. I can understand that it can be rendering issue but how does getting total length affects it. Super weird.

Amazing Guys! Really appreciate it ! You Guys truly are the best, does not matter how this ends. Greetings from the ThemePunch Team, the Rock Solid users of GreenSock since ages !!

Don't worry about it, it is still indirectly related to the forum. @Jonathan is CSS wizard, he loves taking on such questions. I am sure he would be able to offer the solution as long as it isn't a bug.

That actually made the trick, the error is gone now. Thanks!!

Hi @DigitalDude I'm not sure I completely understand the desired result as I don't see any tweens in your demo. (just pins). Is this what you need to happen? Hopefully that helps. For GSAP training, you can check out the learning page: https://greensock.com/learning Getting started https://greensock.com/get-started-js Noble Desktop Course https://www.nobledesktop.com/books/gsap Happy tweening. PS Your demo was also missing the GSAP plugin that allows ScrollMagic to hijack the tweens. More info: http://scrollmagic.io/docs/animation.GSAP.html

Hello @themepunch This is happening since the layer is rotating causing the rotated bg to intersect the z-axis of it. You will have to move the layer so its z-axis is moved forward so the intersection doesnt overlap the layer text. But this is a Safari z-axis bug that i have seen many times when you nest various elements with rotation. So you will have to account for it, but then you will have to change the translate X and Y to accommodate the z-axis. A better way is to just change your markup so its standardized with how absolute and relative positioning work in the browser. You have various absolutely positioned nested elements with some having nested rotation which can cause this type of rendering in Safari. I know I have said this many times in this forum, but you shouldn't be setting position absolute without having a parent set to position relative, so the browser can stack elements appropriately. So what i did in your above codepen's CSS: on bg, i changed z to z-index so its proper syntax on layer, I changed position: absolute to position: relative on layer_wrap, i changed z to z-index so its proper syntax on layer, I changed position: relative to position: absolute on layer, i added z-index so it stacks correctly on layer, I added top: 0px since its always best to define your offsets and not trust the browser user defined style sheet which is usually set to auto on layer, i added white-space: nowrap so the text doesnt wrap If it was me I would also add a parent element with position relative to world element so world is absolutely positioned relative to its parent to prevent issues like you were seeing above when nesting elements. Try this modified fork of your codepen. Tested on iPad Pro with latest Safari and I didnt see the intersection of rotated elements now. Happy Tweening! Resources: CSS z-index: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index CSS position: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Hm, it looks like you're only updating a variable but that won't somehow change what was previously evaluated/declared in your tween vars object. That's unrelated to GSAP - it's just how JavaScript works. If you need it to be dynamic, you could use function-based values like this: I leveraged a timeline just because it mimics what you said you're trying to do in your "real" project.

Hi @RoxanneAllard Welcome to the forum. You just have a little problem with your scripts. // these are pointing to a local directory <script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="js/greensock/TweenLite.min.js"></script> // please switch to these <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/CSSPlugin.min.js"></script> I'd recommend loading TweenMax instead as it will load the additional files by default. TweenMax loads: TweenLite TweenMax TimelineLite TimelineMax CSSPlugin AttrPlugin RoundPropsPlugin DirectionalRotationPlugin BezierPlugin EasePack On CodePen this is really easy. Just hit the little gear icon on the JS panel and use the drop-down to load TweenMax. (& jQuery too) That should get you running correctly. Happy tweening.

I think it should have worked the way you had it, but I'm glad the change solved it for you. Happy tweening.

Posting because I found a solution that worked for me (and to also remind myself if I run into this in the future) In my case, I was given some banners developed by someone else and they were using embedded HTML SVG's which had DUPLICATE style PROPERTY within a few instances of <svg> tags. The solution was to merge the css styles into 1 property, see screenshots. That should make it work, I HIGHLY RECOMMEND that moving forward to run all banners through the GDC HTML5 Validator which would fire off an error if there are leftover problems. https://h5validator.appspot.com/ Best of luck!

The fundamental problem is that you tried to reference something in an iframe that DID NOT EXIST (yet, because it hadn't loaded). It's a little bit like: var foo; console.log(foo); //undefined!! foo = "whatever"; Sure, you declared foo = "whatever"...but not until AFTER the console.log() which is why it reported undefined at that point. So when you tried referencing document.getElementById('animateCC').contentWindow.init as a call() in your timeline, the reference was undefined. The browser couldn't find it because the iframe's JavaScript hadn't even loaded and executed to declare what 'init()" even was. Tucking it into a function the way I did only accomplished one thing - it made document.getElementById('animateCC').contentWindow.init execute when that parent function was actually triggered (which I assume was later in your timeline, thus enough time had elapsed by then that the iframe's content had finished loading, thus document.getElementById('animateCC').contentWindow.init was defined at that point). Make sense?

Ah, I bet what's happening is that when you're creating your timeline that function (in the iframe) doesn't even exist because the iframe hasn't finished loading. So you could either wait until it's done before creating your timeline stuff, or just call a function that finds that one at that time (when it's called), kinda like: tl.call( function() { document.getElementById('animateCC').contentWindow.init(); } ); But of course that assumes that by the time the call() is reached in the timeline, that iframe has totally finished loading. See what I mean?

Hi, Thank you for your answer Jonathan. I am sorry to tell, but the result of your changes are just exactly the same like my one. They break in Safari on a Mac OsX (Tested on 3 different Devices). It works on Mobile Devices which is great for the first but not in Safari on Mac OSX. Also it works only due the fact that the parent element gets relativ position. if i change the relative position to absolute on the wrapping layer, it just brakes as well on mobile devices which shows that somehow the stacking container structure is handled there differently. Also, using relative position with top/left definitions on the layer_wrap (see my last example) behave differently on Safari Mac and on Mobile devices and in Google Chrome. I was hope that some kind of preserve-3d transformstyle would force a new stacking container on the layer wrap. Moving things on the "z axis" would change also the distance to the viewer, getting the feeling that the layer is somehow scaled/zoomed so it is definetely not a solution for me. Until Chrome creates a new "rendering area" for the layer_wrap and using the z-index of those containers to decide which elements rendered over which one, seems that Safari somehow merge those different "stacking" areas and shows us a combination of those. I understand well why the layer is cut, and half is not visible, but i want to split those worlds, rendering them independent but still profit of the mix-blend mode and further css futures. Sorry to being a pain and for disturb you guys with something which is not GS based at all. If you wish, please just close the blog, since it is a Safari Issue and not a GS issue. With the deepest thank you and have a great day ! Krisztian

Hi @kbeats Welcome to the forum and thanks for joining Club GreenSock. I have no experience with Adobe Captivate, but I have a couple things you can try. First, can you target the SVGs (or their parent divs) for a simple tween? Something like opacity. I'm just curious if that works or if this is just something with the MorphSVG plugin. I can't see your SVGs, but I'm assuming they're already paths, correct? If so, you wouldn't need to use the convertToPath() method. That's for primitive SVG elements like <rect> <circ> etc. Also, are the SVGs made with one path or are you trying to target a group? You said you inspected the file and the divs have names of "#nextc" and "#backc". Do the SVGs have an ID or class? More importantly, do the target paths themselves have any sort of ID or class? If the paths have no identifiers, you could try something like this. TweenMax.to("#nextc path", 1, {morphSVG:"#backc path"}); That's assuming there is an SVG in that div and it only has one path. Without seeing your actual SVG code, I'm just shooting in the dark here. Hopefully something I've listed will point you in the right direction. Happy tweening and welcome aboard.

It shouldn't make any difference, but I'm curious if you get the same result with this change: angle = this.target._gsTransform.rotation; As Jack mentioned, a demo would be quite helpful in troubleshooting this for you.

Hm, it's tough to troubleshoot blind - is there any way you could post a reduced test case, perhaps as a codepen? Also, are you trying to access _gsTransform directly on an element (yourself)? If so, make sure that GSAP has applied a transform to that element because _gsTransform gets added the first time GSAP must apply a transform-related value. You can even do something as simple as: //doesn't actually change anything, but ensures that _gsTransform exists on the element TweenMax.set("#element", {x:"+=0"});

The timing is based on the duration set in the ScrollMagic scene. In this particular case you have that set to 100%. If you set the duration in the ScrollMagic scene, the actual tween duration won't be used. ScrollMagic hijacks that value and tweens as the user scrolls. If you want the actual tween duration to be used, you can just skip the duration property in the ScrollMagic scene and the tween will play normally when it hits its trigger. To control the scale you can adjust the value in the tween I added. I just used a scale of 2 as a quick example. Happy tweening.

Great Sahil, that was just it. Thank you @Carl, @PointC and @Sahil Love Us ❤️

It's been discussed a few times.

Thanks for the demo. When you create a tween it records a duration. When you update your timing value, the tween has no idea that is happening. It already has its duration. Our video about invalidate() illustrates how pre-recorded values do not get updated when you change the values of variables that were initially used to create the tween. https://greensock.com/docs/TweenMax/invalidate You can change the duration of a tween using the duration() method (if you have a reference to the tween: myTween.duration(6)) but since your tween is in a timeline, changing the duration of the tween for ".red" is NOT going to then move the position of the second tween in the timeline (".blue"). In this case I would suggest creating a new timeline when you need to change the duration. This can be handled with a function that you call whenever the duration should change for more info on functions that create and return timelines please read: https://css-tricks.com/writing-smarter-animation-code/