Jump to content
Search Community

jeb

Members
  • Posts

    3
  • Joined

  • Last visited

jeb's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

0

Reputation

  1. I have looked at the horizontal example before, but unfortunately it's not an option. Can you fork my codepen with an example using intersection observer? I'm not exactly sure how to play the animation using that.
  2. Thanks for the reply, I have made a pen showing something close to what I have. Each panel would have it's own animations and text, but for this example I put a timeline animation in the green panel. So I would like to only trigger the entry and tip animation when the panel is full screen.
  3. I am creating a page with a similar layout to this sample: http://scrollmagic.io/examples/advanced/section_slides_manual.html, but I want to trigger another TimelineMax() animation when each slide comes into full view, but I am having trouble figuring it out. Here is timeline for the wipeAnimation // define movement of panels var wipeAnimation = new TimelineMax() // animate to second panel .to(".post-1970", 0.5, {z: -150, delay: 1}) // move back in 3D space .to(".post-1970", 1, {x: "-16.666%"}) // move in to first panel .to(".post-1970", 0.5, {z: 0}) // move back to origin in 3D space // animate to third panel .to(".post-1970", 0.5, {z: -150, delay: 1}) .to(".post-1970", 1, {x: "-33.332%"}) .to(".post-1970", 0.5, {z: 0}) // animate to forth panel .to(".post-1970", 0.5, {z: -150, delay: 1}) .to(".post-1970", 1, {x: "-49.998%"}) .to(".post-1970", 0.5, {z: 0}) // animate to fifth panel .to(".post-1970", 0.5, {z: -150, delay: 1}) .to(".post-1970", 1, {x: "-66.664%"}) .to(".post-1970", 0.5, {z: 0}) // animate to sixth panel .to(".post-1970", 0.5, {z: -150, delay: 1}) .to(".post-1970", 1, {x: "-83.33%"}) .to(".post-1970", 0.5, {z: 0}) // animate to seventh panel .to(".post-1970", 0.5, {z: -150, delay: 3}) .to(".post-1970", 0.5, {z: 0}); And here's an example of a timeline that I would want to animate once the panel is back to 0: // Jot It Down var jotItDown = new TimelineMax(); jotItDown .fromTo('#jot_it_down .entry', 2.0, {y: '20px', opacity: 0}, {y: '0', opacity: 1, ease: easeOutAnimation}, 0, "Start") .fromTo('#jot_it_down .mountains', 1.5, {y: '20px', opacity: 0, scale: '0'}, {y: '0', opacity: 1, scale: '1.0', ease: Elastic.easeOut.config(1.0, 0.4)}, 0.5) .fromTo('#jot_it_down .tip', 1.5, {y: '20px', opacity: 0, scale: '0'}, {y: '0', opacity: 1, scale: '1.0', ease: Elastic.easeOut.config(1.0, 0.4)}, 0.75) .fromTo('#jot_it_down .dollar', 1.5, {y: '20px', opacity: 0, scale: '0'}, {y: '0', opacity: 1, scale: '1.0', ease: Elastic.easeOut.config(1.0, 0.4)}, 1.0);
×
×
  • Create New...