Leaderboard

I'm pretty sure getBoundingClientRect works in all cases. The circle looks weird because it doesn't have corners, but it's correct.

Your DOM code is pretty verbose, so I made another version with lit-html. I didn't do a reverse a animation, but you could do it the just like the open animation. You don't have to reuse or reverse the same timeline.

Only a few minutes to chime in here ... but you could get the progress() at each label, determine if the difference between the two is greater than .5 also have a look at getLabelTime() (I think :/) If so, set the tween to reverse() to the start and then reverse to the destination label using tweenTo().

Are you asking how to move your element to the start of a path? If so, you're looking at the answer. A motion path is an array of points, with the first item being the start position. var start = motionPath[0]; TweenLite.set("#markerStart", { x: start.x, y: start.y });

@OSUblake Wow. Here I was working on a new example to simplify and refactor as @Carl rightfully suggested how confusing it was to follow and understand -- then I see your post regarding flexbox animation via capturing start/end position which got me excited -- AND THEN you drop this codepen on me. Your expertise and knowledge never ceases to amaze me! Just incredible, thank you! It's late right now and I've been working through this all day so I'm going to get some sleep and come back into it fresh tomorrow and really look through how you went about doing it. I'll most likely end up dissecting a lot of what you did to try and learn it better and adapt it for the current draft I was working on, but just having this resource will be of tremendous help. I'll absolutely be sure to reply back here and share what comes of it all, but in the meantime, again, I just can't begin to thank you both for the assistance and help you have provided. Honestly, you guys make up one of the best dev communities out there that I've come across, so genuinely thank you for that.

I think @Carl did a good job pointing out the main issues you are having. It looks like you are trying to do a FLIP animation. This is a good place to start.

@MSCAU Funny, I was just talking about that. It's going to be years before transform-origin is consistent in every browser. https://greensock.com/forums/topic/19333-troubles-with-svg-animation-and-mastertimeline/?tab=comments#comment-89856 GSAP solved that problem well over 4 years ago. https://css-tricks.com/svg-animation-on-css-transforms/

Didn't we just cover this in your other thread?

@OSUblake with the help of your Codepen and a much simpler Class system, I was able to really improve the Codepen to a much better spot, but I'm running into one minor issue. I made the details image always visible and set it to grayscale so you can see what I'm talking about, but after running the animation once, it seems like my b.top is off by ~25px. Looking through both the Open and Close function I can't identify anything that could be causing it and was wondering if you may see something I'm missing. I also have a question regarding the following: this.image.style.cssText = ""; Is there a specific reason you used this over a clearProps within the Close timeline? Updated Codepen: https://codepen.io/ekfuhrmann/pen/EOKrEJ Again, thank you so much!

Are you using a HiDPI monitor, like retina, 4k, 5k. Those can kill performance, particularly with something that is costly to render like a drop shadow.

Thanks for the demo, unfortunately I'm not really following what is happening. Please understand it is very difficult to look through 150 lines of code with no comments AND large chunks commented out for no apparent reason. It seems the core of your issue is that you want an animation to open, revealing somethings and then close via some interaction. I'm certain you could simulate that with a dozen or so lines of code and 2 or 3 elements that reveal and hide. All the stuff about dom elements being populated with different data is just unnecessary clutter. The one area that jumped out as a potential trouble spot is that in your open function you have this code this.tl .fromTo(this.DOM.img, 0.8, { x: (rect.boxImgRect.left - rect.detailsImgRect.left), y: (rect.boxImgRect.top - rect.detailsImgRect.top) },{ x: 0, y: 0 }) .fromTo(this.DOM.img, 2, { width: rect.boxImgRect.width, }, { width: '100%', clearProps: 'width', onComplete: () => (this.isAnimating = false) }, 0); which keeps adding new tweens at a time of 0 to the same timeline. putting new tweens at the beginning of a timeline isn't going to place the playhead at a time of 0 and play the timeline. maybe you need to call restart() also? Its not clear to me why all those values have to be recalculated and why the timeline needs fresh tweens every time. in most cases you would just restart() the timeline again and your open and close would just be a play() or reverse() of that timeline. I suspect that if you can simplify the demo so that you can demonstrate the issue with as little code as possible, we will be better suited to give you more decisive guidance. Also if you are going to revise your demo, please make a fork as it makes it very difficult for people to try to figure it out if it changes. Thanks

Hi all, I wanted to let you know that you can now use TweenUI ad tags to run banners on the Sizmek DSP. This means you can create and publish, and later edit and re-publish banner ads and any changes will go live instantly. Also, TweenUI has been getting a facelift lately and some features have been greatly improved. Check it out at tweenui.com/animator and I'd love to hear any feature request or feedback. And yes of course — it's all GSAP powered. Regards, Erik

Hi @jp_uk81 There's a problem with the order in certain browsers. For example, Chrome reports the color first. element.style { filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 14px); } My workaround, use CSS variables.

Just thought I'd share some banner examples from my day-job https://www.andyfoulds.co.uk/banners/html5_banners/ Reckon every one has GSAP to thank to some extent! Andy___F

alwayzambitious is correct that in using GSAP with GWD, the GWD interface serves mainly as a layout tool for the banner. This process is fresh in my mind, so here's a mini-tutorial to help you get started: 1. STAGE LAYOUT: Create a new banner in GWD at the desired size, Place your assets on the stage, putting the layers in the deisred top-to-bottom order. Then, using the Properties panel, give each element an ID, just like you would for Flash or HTML/CSS. These IDs will be used in your GSAP js code later on. 2. ADD A TAP AREA WITH CLICK TAG: (OPTIONAL) This element is for when someone taps or clicks the banner or button to go to the destination page. From the Components panel, drag a Tap Area onto the stage on top of everything. Generally this is resized to cover the whole stage, but it can also be for a smaller call to action element on the banner. Usually media vendors will require a 'clickTag' for the Tap Area, just like for Flash banners: On the Events panel, click the '+' in the bottom left to make a new Event that will be associated with the Tap Area. Going through the dialog to make an Event, set the following: Target: Target -> gwd-taparea_1 (that's the default id GWD makes for the first TapArea you add to the stage), Event: Tap Area -> Touch/Click, Action: Google-Ad -> Exit, Receiver: gwd-ad, Configuration: Metric ID -> clickTag, and URL -> any base URL for the destination page (this gets overridden with a tracking link by the media folks). Then click SAVE on the Event dialog. 3. ADD A TRIGGER EVENT FOR YOUR GSAP CODE: On the Events panel, click on the '+' then use these settings for the dialog: Target: Target -> 'page1' (that's the default name GWD gives to the initial state of the banner). Event: Page -> Page loaded, Action: Custom -> Add Custom Action. For the new Custom Action, give it a name like 'animation'. GWD will put 'gwd.' in front of it in order to keep it in the same namespace as the rest of the banner code. In the space provided for the function code, just add a javascript comment for now. Your GSAP code will go there later. Click SAVE on the Event panel. 4. ADD YOUR GSAP CODE: Save the GWD project and close it, then open the .html file that was generated by GWD in your favorite text editor (or use GWD's built in Code View) Add <script> tags to the html to import the GSAP libraries you wish to use. Find where your Custom Action function was created ('gwd.animation' for example) and put all of your GSAP-related code inside that function, including any 'helper' functions. At this point it is just like creating a GSAP animation on a web page, except GWD has done the initial setup and layout for you. Note that the GWD timeline Play button will not trigger your GSAP animation. You must use the Preview function to execute the code in a browser instead. Hope that helps!