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
========================================================================== */