Leaderboard

Hm, I think you're misunderstanding... When you animate "x", that affects the CSS transform property, like "transform: translateX(...)". So no, it should NOT be setting the "left" property. That's something totally different. The codepen you mentioned is working exactly as I'd expect. style.left should indeed return "". Here's a fork of that codepen that uses "left": Seems to be working as expected. Again, if you're still having trouble it'd be super amazingly awesome if you could pretty please provide a reduced test case in codepen or jsfiddle or even a live site I guess.

Figured it out! Needed to use the invalidate function. See here: var box = document.querySelector('.box'); var timeline = new TimelineMax({ repeat: -1, onRepeat: () => { timeline.invalidate(); } }) timeline.add(TweenMax.to(box, 1, {x: 0, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 50, y: 80})); timeline.add(TweenMax.to(box, 1, {x: 100, y: 100})); timeline.add(TweenMax.to(box, 1, {x: 150, y: 80})); CodePen Thanks all who helped out.

Yep, that looks like an odd Edge bug related to how it reports the getBBox() (the bounding box) of <line> elements. Of course the solution @PointC offered is excellent, or you could convert those <line> elements to <path> elements. In fact, if you've got MorphSVGPlugin, it'll automate that for you - simply call: MorphSVGPlugin.convertToPath("line"); But for lines, it's super easy to manually convert those coordinates. Just format it in the "d" attribute like x1,y1,x2,y2 and slap an "M" at the beginning. Here's a forked version that seems to work fine for me in Edge:

@Svein-Tore What is being outputted is correct, an empty string. When you console document.getElementById("one").style.left, it is an empty string because left isn't defined on that element. The left property is a CSS position offset. The tween property x doesn't equal the left property. The x property in GSAP is equivalent to translateX() for a CSS transforms. If you look in the codepen's HTML, CSS, and JS panel.. you will see no left property defined anywhere. So by not defining left in the CSS or via GSAP, the elements style.left DOM property will be an empty string, meaning not defined in the elements DOM node. So it is outputting like it should

It's tough to diagnose without a codepen or something, but I'll mention a few things: _gsTransform is only for transform-related values (x, y, rotation, scaleX, scaleY, xPercent, yPercent, etc.) NOT for top/left or any other CSS values. I wonder if you're running the console on a different document. For example, if you have a codepen open in editor mode, it's running the results inside fo an iframe, so if you try running document.getElementById("bullet").style.top on that top/parent window, it won't find the one that's inside your codepen. Make sure you don't have multiple elements with "bullet" as their id. If you're still having trouble, we'd be happy to look at a codepen demo (or jsfiddle or whatever).

You can access those values using _gsTransform. When you tween any elements, GSAP attaches _gsTransform to that element's DOM object. So you can access all the current values by using _gsTransform. For example, var elem = document.getElementById('box'); TweenMax.to(elem, 1, {xPercent: 100, onComplete: function(){ console.log(elem._gsTransform.xPercent); } }); Will return current xPercent for that element. It can be very useful to access values of elements so you can calculate anything you want. If you are using jQuery, var $elem = document.getElementById('box'); TweenMax.to($elem, 1, {xPercent: 100, onComplete: function(){ console.log($elem[0]._gsTransform.xPercent); } }); // Trying to access _gsTransform will return undefined because you are accessing them before GSAP attaches object to DOM console.log($elem[0]._gsTransform.xPercent); You will have to use index of that element to access DOM object. If you are using Draggable, Draggable.create(elem,{ onDrag: function(){ console.log(this.target._gsTransform.xPercent); } }); So basically you have to access DOM object to further access these values. You can investigate further by checking objects from developer tools and get idea about what values GSAP attaches to DOM object of each element it ever tweens/sets. NOTE: You can access these values whenever you want, except if you set 'to/from/fromTo' tween and try to access these values right away on next line, you will get undefined because you will be trying to access these values before GSAP could attach the object to DOM.

Hi and welcome to the GreenSock forums, You're on the right path, just missing one component : CSSPlugin. TimelineLite sequences individual TweenLite tweens so you need TweenLite any time you use TimelineLite (as you found out). Since you are tweening the css properties of DOM elements you need CSSPlugin. I know you probably want to run as lean and mean as possible, but IMHO loading all of TweenMax.min.js is as easy as it gets. TweenLite, TimelineLite and CSSPlugin together make up the majority of the TweenMax.min.js file so the filesize savings of only loading those 3 is going to be fairly insignificant. -- Side note I see you are tweening visibility to "visibilble" and opacity to 1. Take a look at autoAlpha as it handles both properties for you. For 0-duration tweens you can also just use set(). .set('#urlCopyMessage', {autoAlpha:1})

Yeah, you will most likely need quite a few DOM Elements. A top and bottom for the current number and a top and bottom for the next number. In the example I provided this is the HTML for just 1 digit <div class="card js-hour-first"> <div class="panel panel-top panel-in--shadow"> <span class="number">0</span> </div> <div class="panel panel-btm panel-in"> <span class="number number--btm">0</span> </div> <div class="panel panel-top panel-out"> <span class="number">0</span> </div> <div class="panel panel-btm panel-out--shadow"> <span class="number number--btm">0</span> </div> </div> Everywhere you see a 0 he is using JavaScript to update value with appropriate number for the current and next number: /* Updates number element with current time digit */ function updateNumber( numberElementArray, digitArray, arrayPosOne, arrayPosTwo, arrayPosThree ) { numberElementArray[arrayPosOne].innerHTML = digitArray[arrayPosThree]; numberElementArray[arrayPosTwo].innerHTML = digitArray[arrayPosThree]; } Here's another example from the search results I provided This person is dynamically creating a new top for the number being revealed each time the current top flips down: // make el to sit behind the top digit var $newMinTop = new Element('div', {class: 'digit-top', html: $minTop.get('html'), style: 'z-index:1;'}) var $newMinFront = $newMinTop.getElement('div.front'); var $newMinBack = $newMinTop.getElement('div.back'); $newMinFront.set('text', minText); $minWrap.adopt($newMinTop); // start the animation $minFront.setTransform('rotateX(180deg)'); $minBack.setTransform('rotateX(0deg)'); $minBack.setStyle('zIndex', 40); There is no getting around the fact that regardless of which approach you take, its a fairly complicated effect, and not the type of thing we can just create for you from scratch. We really have to keep our support focused on the GSAP API and can't go too far down the path of getting into all the setup, logic and DOM manipulation needed to build a flip-clock effect. I understand you don't need a clock necessarily but getting any digits to change in this fashion is a bit of work. If you have a simple demo and need some help with a question relating to GSAP, please post it and we will do our best to help. Unfortunately, I couldn't find any existing examples that already use GSAP.

Thanks for the warm welcome guys! @Carl This definitely more than enough to help me continue my idea and keep experimenting. And sometimes something needs to be destroyed to make way for better things @Dipscom Thanks for that, the additional info is quite helpful! The help is much appreciated. Cheers!

[re-posting from the correct account] Great work, Blake! This sparked me to look for a way to just define an ease that'll do all this wizardry for you and here's what I came up with: var ExpoScaleEase = function(start, end) { var factor = Math.log(end/start), change = end - start; return function(v) { return (start * Math.exp(factor * v) - start) / change; }; }; //to use it, you pass in the start/end scales... TweenLite.to("#img", 5, {scale:0.5, ease:ExpoScaleEase(30, 0.5)}); If you guys think this is useful, I could add it to EasePack. Maybe the official API would look more like: ExpoScaleEase.config(start, end); Ya think? Here's a fork of the original with this applied: Open to suggestions. It seems to work pretty well in my limited tests.

What are you trying to do? You need to be specific. That script took me 2 seconds to fix, but there's nothing in there that would have anything to do with _gsTransform as it uses canvas. All the properties you need are listed right there. If you're trying to do that with HTML or SVG, that's another story. Here's a version I had lying around.

@Dipscom your training is complete. No longer shall ye wipe your weeping eyes on the hem of my cape. Go forth animating all of the things and share thine vast wisdom! @Daan Welcome to the GreenSock forums, Glad to hear you are enjoying GSAP. Just to elaborate a little on Dipsom's solution above. The magic that happens on click is that he is tweening the progress of each circle's animation. Just like you can tween the position of an element, you can tween the progress and duration of tweens and timelines which allows you to do some pretty cool things. Here is a demo:

Hello @Daan Welcome to the forums! Very nice question! I never get those ideas, thank you. And thanks for the sample pen. You say you're new and learning the ropes, yah? Well, how does it feel to have a concentrated dose of intense refactoring of your code? Have a look at my fork of your pen. I'm sorry but I did butcher your work a bit... Let me know if you have any issues understanding what's going on or why. Happy tweening!

oh, BTW - no I didn't see a blank screen in CodePen. It was just the regular content. Kind of weird.

You beat me to it. Now that I better understood where you were going with the animation, I was just about ask you if you'd seen invalidate(). Glad you got it figured out. Happy tweening.

Sorry, it's just REALLY hard to tell you what's going on without seeing it. Any particular reason you don't want to post something we can look at? That'd sure help. In your first example, you're animating the "top" but you're checking the "left" property in the debugger. Once I can see the problem in context, I'm pretty confident I'll be able to give you a much more solid answer.

There would be a few ways to make this happen, but I think the simplest would be to tween to your repeat starting position with a TweenMax outside of your timeline. When that completes, start your main timeline that infinitely repeats. Something like this: Does that work for you? Happy tweening.

hmmm... I think you're right Jack. This does look like a strange CodePen issue. I moved those pens over to a regular website and everything is just fine on my iPads. This is a bit weird as I'm almost certain I've tested some ScrollTo animations on CodePen and the iPad was fine. Maybe I'm just crazy. Anyway, I'm blaming CodePen. All my other tests didn't produce any problems. Happy tweening.

Hi @Bryan Welcome to the forum. If I understand your desired outcome correctly, I'd recommend removing the repeat from your timeline and add it to the last tween instead. Like this: var box = document.querySelector(".box"); var timeline = new TimelineMax(); timeline.to(box, 1, {x: 50, y: 50}); timeline.to(box, 1, {x: 50, y: 100, repeat:-1, yoyo:true}); Is that what you meant? Happy tweening and welcome aboard.

Well using x is same as left, it is just that key for left value in _gsTransform object is set to x. So if you want to access left value for element you can use x for it. Following is recent thread where you might get more insight on _gsTransform.

Hm, when I first tried to look at that codepen on my iPad, it was a blank white screen. Weird. Once I took it out of codepen, it seemed to work fine. It was as if it was related to codepen and the way that it loads things into an iframe. Like Apple's ad blocker was kicking in maybe. Not entirely sure yet, but I had a few questions for you: Are you able to reproduce the problem OUTSIDE of codepen? And outside of an iframe? Do you see the totally blank screen like I did or are you seeing content on the page? Have you tried setting autoKill:false? Apple has historically had bugs that mis-reported values during the animation, sometimes causing the autoKill to kick in.

@Carl - thanks for the clarification! Everything is working now. As far as weight savings, I agree - and we're shipping to production with TweenMax.min currently. No reason to do anything else, until you get to the final stages of optimizing. Those little savings all add up PS - Thanks for the autoAlpha tip - I had forgotten that it existed!

Thank you a lot! I don't want to build a flip clock itself, I rather want to build this effect for some kind of a fake countdown timer. I want to have "10 days left", where it browses down really quick from 20 to 10 each page load. My main problem is that it seems impossible to only animate the top part of the number. I'm quite sure I have to double add each number to my DOM?

@PointC also shared a solution in similar thread:

It's kind of tought to offer a challenge without really knowing your skill level. If you typically make banners that just play through I would suggest exploring some interactivity, like make some buttons that navigate to different sections of an animation when clicked.

Hi @mi_cky Welcome to the forum. Yep - draggable works with symbols. Here's a basic demo. Hopefully that helps. Happy tweening.

I am not worthy. One day. But, senpai, I feel ready for Monster Truck! Will you lead me?

Have you ever wanted to bring the 3RD dimension into your project with the DrawSVG plugin? Using a series of masks we can simulate an SVG stroked path navigating around or through a subject in a photo. This path can be solid, dashed, dotted or whatever you like. My new demo uses some things from my post above about animating dashed strokes with masks, but goes a bit further. Get wrapped up in the swirling 3D lines of the DrawSVG plugin: http://codepen.io/PointC/full/ZWEqdK/ If you want to use this technique, here’s a bit of info: Start with the photo you’re using at the maximum size you think you’ll need. (Note: You can responsively swap to smaller versions as long as you maintain the same aspect ratio.) Create a new AI file the exact same size as you biggest photo. Import the photo for use as the background while designing your SVG. (Be sure to also create a plain rectangle that’s the same size as the SVG so everything lines up at export time) Draw the stroke that will be wrapping around/through the subject to your liking. Duplicate that path and make it #fff – this copy will be the mask. Unlike my earlier post where I mentioned making the mask path wider than the original, this time it needs to be the exact width as the underlying path. If it’s wider, you’ll inadvertently be showing extra parts of the original path at perpendicular intersections. (Note: making a duplicate path for a mask reveal is only necessary if you want to use dashed strokes. If you’re using solid strokes only, you can simply animate them directly with the DrawSVG plugin.) At all points where the stroke should be going behind the subject, draw a polygon over the subject with a color of #000. All these polys will be a part of your SVG mask along with the stroke mask that will animate. The polygons will be static but will scale perfectly. For my demo, I used three separate strokes to create a simple tube effect as it draws and you can see a bit of the perpendicular intersection reveal problem if you watch for it. It’s not too bad, but something to keep in mind. As mentioned above, if you’re using a solid stroke and don’t need dashes, no mask path will be necessary and this isn’t going to be an issue for you. You would just need your subject masking polygons. Finally, I put the image into a containing div and let the image drive the size of it. Place your SVG into the div with absolute positioning and a width of 100% so it can scale along with the image and containing div. All that’s left after that is to control the mask reveal and animate any changes in the stroke that you like. Note: the demo uses the DrawSVG plugin which is a Club GreenSock perk at the Simply Green membership level. I highly recommend it. Happy tweening everyone.

Using Gulp is one the best ways to create a frictionless workflow for your SVG animations. Pretty much the antithesis of Mr. Gannon's video. I don't have the time or space to explain how to use it in this post, but for those who are using it, I found a little snippet of code that might be very useful. It uses the gulp-inject plugin. Inject SVG https://github.com/kiyopikko/inject-inline-svg/blob/master/gulp/injectsvg.js Using that as a task, you will probably never have a reason to ever touch the SVG inside your code editor. Lets say you are working on an SVG named flower in the following path src/svgs/flower.svg To inject it in your HTML, you would create a placeholder like this... <!DOCTYPE html> <html> <body> <!-- src/svgs/flower:svg --> <!-- endinject --> </body> </html> Sample gulpfile.js setup var gulp = require("gulp"); var inject = require("gulp-inject"); var browserSync = require("browser-sync"); var parsePath = require("parse-filepath"); var fileset = require("fileset"); var reload = browserSync.reload; gulp.task("svg", function() { // Run inject svg and other svg related tasks here like SVGO }); gulp.task("serve", ["svg"], function() { browserSync({ port: 3000, server: [".tmp", "dist"] }); gulp.watch(["src/svgs/**/*.svg"], ["svg", reload]); }); gulp.task("default", ["serve"]); Now anytime you change an svg, that task will automatically run, injecting the updated SVG, and then it will reload your browser. The injected SVG will be a copy, so it's not going mess with the original SVG you are working on. NICE!!! Also, using BrowserSync provides an IP address for you to connect other devices, like your mobile devices, so all changes will be synced across all your connected clients. You can even use a proxy for browser sync if you're using a development server for doing stuff like WordPress development.