Barman

Ah ha! Sorted Cheers.

That worked Carl, cheers again. https://codepen.io/petebarr/pen/LkLpYq My code could be cleaned up a little in a loop, but works for now

Also I noticed in your seminar that you used a combination of both TimelineMax and TimelineLite in your code. Any particular reason for this?

Hi Jack and Carl, I joined in one of your web seminars about the modular approach recently and it's great, however I'm having a bit of an issue with my 'set' at the beginning of each function. Each 'frame' in the html has a wrapping div, e.g. <div class="frame frame0"> <svg class="carton-upsidedown" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 190"> ...svg paths in here... </svg> </div> .frame in the css has 'visibility:hidden;' so that the frames are all hidden until 'requested' in the timelines. So frame0 would start by setting its visibility to visible, run the animations and when done set that frame hidden. Then frame1 would become visible, animate, set to hidden, and so on. My assumption here is that for performance only the assets that are required for that animation are 'displayed' and painted in the browser. However, when you run the animation for the first time, frame1 has visibility visible at the same time as frame0 so you get assets from both frames displayed at the very beginning which is not what I expected. Checking in dev tools I can see that frame1's element.style has been set by GSAP to be visible even though frame1's timeline hasn't begun yet. After the animation has run it's full course and I scrub the animation back to the beginning using my html slider for previews, it works as expected. Am I making any bad assumptions here with my 'set's so it doesn't work as I expect on first run of the animation? I hope my description of my issue is ok I'm trying to setup a framework for our studio for DoubleClick banner ads, for quick reuse. I would add a codepen to show the full thing in it's glory but I can't publicly reveal the banner animation just now incase I annoy the client. Cheers! Pete. /* ========================================================================== START ANIMATION ========================================================================== */ var tl = new TimelineMax(); /* Frame 0 ========================================================================== */ function frame0() { var tl = new TimelineMax(); tl.set(".frame0", {visibility:"visible"}) // set frame container visible .fromTo(".carton-upsidedown", 1.0, { x: 753, y: 50, rotation: 155}, { x: 573, y:-169, rotation: 30, delay: 0.4, ease: Power2.easeInOut}) ... and so on .set(".frame0", {visibility:"hidden"}); // hide frame container return tl; } /* Frame 1 ========================================================================== */ function frame1() { var tl = new TimelineMax(); tl.set(".frame1", {visibility:"visible"}) // set frame container visible .from(".fresh", 0.6, {scale: 0.5, ease: Elastic.easeOut.config(0.8, 0.5)}, "-=0") .from(".carton", 0.6, {scale: 0.5, ease: Elastic.easeOut.config(0.8, 0.5)}, "-=0"); .set(".frame1", {visibility:"hidden"}); // hide frame container return tl; } /* Add frame timelines to main Timeline ========================================================================== */ tl.add(frame0()) .add(frame1()); /* ========================================================================== END ANIMATION ========================================================================== */

Hi Brad, do you have any release for your Bannerwave preview as yet? Pete.

Cheers Carl, I'll give that a blast later. Really appreciate your help guys!! Awesome!

I'm trying to get the dots to rotate round with the ends of the white lines at the same time as they draw out, as if they are stuck to the ends of the lines.

I've added this pen to show you what I mean: http://codepen.io/petebarr/pen/LkLpYq I'm not sure how to implement it in TimelineMax using the method you described.

Can this also be done when using TimelineMax?

Cheers Jack, and Carl for the pen. Mind blown! Starting to feel a little like Inception. A dream within a dream. Or should I say 'A tween within a tween'? Boom!

Ahhhhh! You champ! Cheers for that

Hi, I've been messing around with animating svgs and was trying the onCompleteAll, using the 'Good' method outlined above. However it doesn't appear to be working for me when using it with TimelineMax, it only works with TweenMax. I've got a pen where you can see the getCircPosition function isn't being called. http://codepen.io/petebarr/pen/LkLpYq Am I doing something fundamentally wrong here? Don't judge on the unfinished nature of the code Cheers, Pete.

pathDataToBezier is great! However, is there any way to animate to a percentage of the length of the bezier path?

Hey Carl, Yeah I thought this would be the case. Wanted to avoid throwing in a little extra markup but not a complete sin Oh and good point about the new timeline each time, a little oversight on my part. Does .active() only work on TweenMax? Cheers!

Hi, I've got 3 links with an :after which I'm animating on 'mouseenter' but is there anyway to give scope to the 'getRule' so that the animations happen independently, rather than all the :after's animating when only interacting with one link? (without referencing the .icon- individually class of course). Please see my pen to see what I mean. Cheers! Pete.