Hey guys, so basicly i want to trigger an animation when the visitor scrolls down to the place the animation is located. how would i go about doing it? this is the code i want to trigger: <script> //we'll use a window.onload for simplicity, but typically it is best to use either jQuery's $(document).ready() or $(window).load() or cross-browser event listeners so that you're not limited to one. window.onload = function() { var sponsor = document.getElementById("sponsor"), funktioner = document.getElementById("funktioner"), patenter = document.getElementById("patenter"), butik = document.getElementById("butik"); godtdesign = document.getElementById("godtdesign"); direktesalg = document.getElementById("direktesalg"); brick1 = document.getElementById("brick1"); brick2 = document.getElementById("brick2"); brick3 = document.getElementById("brick3"); brick4 = document.getElementById("brick4"); brick5 = document.getElementById("brick5"); brick6 = document.getElementById("brick6"); brick7 = document.getElementById("brick7"); brick8 = document.getElementById("brick8"); brick9 = document.getElementById("brick9"); brick10 = document.getElementById("brick10"); brick11 = document.getElementById("brick11"); brick12 = document.getElementById("brick12"); brick13 = document.getElementById("brick13"); brick14 = document.getElementById("brick14"); brick15 = document.getElementById("brick15"); brick16 = document.getElementById("brick16"); brick17 = document.getElementById("brick17"); brick18 = document.getElementById("brick18"); brick19 = document.getElementById("brick19"); brick20 = document.getElementById("brick20"); rbrick1 = document.getElementById("rbrick1"); rbrick2 = document.getElementById("rbrick2"); rbrick3 = document.getElementById("rbrick3"); rbrick4 = document.getElementById("rbrick4"); rbrick5 = document.getElementById("rbrick5"); rbrick6 = document.getElementById("rbrick6"); rbrick7 = document.getElementById("rbrick7"); rbrick8 = document.getElementById("rbrick8"); TweenLite.to(godtdesign, 1, {opacity:1.0, delay:1.0}); TweenLite.to(direktesalg, 1, {opacity:1.0, delay:2.0}); TweenLite.to(butik, 1, {opacity:1.0, delay: 4.0}); TweenLite.to(patenter, 1, {opacity:1.0, delay:3.0}); TweenLite.to(funktioner, 1, {opacity:1.0, delay:2.0}); TweenLite.to(sponsor, 1, {opacity:1.0, delay:1.0}); TweenLite.from(brick1, 0.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05); TweenLite.from(brick2, 0.2, {y:-400, opacity: 0.0, delay:0.2, }, 0.05); TweenLite.from(brick3, 0.2, {y:-400, opacity: 0.0, delay:0.4, }, 0.05); TweenLite.from(brick4, 0.2, {y:-400, opacity: 0.0, delay:0.6, }, 0.05); TweenLite.from(brick5, 0.2, {y:-400, opacity: 0.0, delay:0.8, }, 0.05); TweenLite.from(brick6, 0.2, {y:-400, opacity: 0.0, delay:1.0, }, 0.05); TweenLite.from(brick7, 0.2, {y:-400, opacity: 0.0, delay:1.2, }, 0.05); TweenLite.from(brick8, 0.2, {y:-400, opacity: 0.0, delay:1.4, }, 0.05); TweenLite.from(brick9, 0.2, {y:-400, opacity: 0.0, delay:1.6, }, 0.05); TweenLite.from(brick10, 0.2, {y:-400, opacity: 0.0, delay:1.8, }, 0.05); TweenLite.from(brick11, 0.2, {y:-400, opacity: 0.0, delay:2.0, }, 0.05); TweenLite.from(brick12, 0.2, {y:-400, opacity: 0.0, delay:2.2, }, 0.05); TweenLite.from(brick13, 0.2, {y:-400, opacity: 0.0, delay:2.4, }, 0.05); TweenLite.from(brick14, 0.2, {y:-400, opacity: 0.0, delay:2.6, }, 0.05); TweenLite.from(brick15, 0.2, {y:-400, opacity: 0.0, delay:2.8, }, 0.05); TweenLite.from(brick16, 0.2, {y:-400, opacity: 0.0, delay:3.0, }, 0.05); TweenLite.from(brick17, 0.2, {y:-400, opacity: 0.0, delay:3.2, }, 0.05); TweenLite.from(brick18, 0.2, {y:-400, opacity: 0.0, delay:3.4, }, 0.05); TweenLite.from(brick19, 0.2, {y:-400, opacity: 0.0, delay:3.6, }, 0.05); TweenLite.from(brick20, 0.2, {y:-400, opacity: 0.0, delay:3.8, }, 0.05); TweenLite.from(rbrick1, 0.2, {y:-400, opacity: 0.0, delay:0.0, }, 0.05); TweenLite.from(rbrick2, 0.2, {y:-400, opacity: 0.0, delay:0.2, }, 0.05); TweenLite.from(rbrick3, 0.2, {y:-400, opacity: 0.0, delay:0.6, }, 0.05); TweenLite.from(rbrick4, 0.2, {y:-400, opacity: 0.0, delay:0.8, }, 0.05); TweenLite.from(rbrick5, 0.2, {y:-400, opacity: 0.0, delay:1.0, }, 0.05); TweenLite.from(rbrick6, 0.2, {y:-400, opacity: 0.0, delay:1.2, }, 0.05); TweenLite.from(rbrick7, 0.2, {y:-400, opacity: 0.0, delay:1.4, }, 0.05); TweenLite.from(rbrick8, 0.2, {y:-400, opacity: 0.0, delay:1.6, }, 0.05); } </script> thank you! - Jonas

Please read my previous post again. Your jQuery is not correct. It seems that instead of correcting that you just added webkit-only transforms to the html style attributes to show the back side first. That doesn't address the original problem, and creates the new one you just posted. You should fix your .click() calls to use only one function as suggested, and then you can add some conditional logic to determine whether to spin to side A or B. A solution might look something like this spun = false; $(".cardWrapper").click(function() { TweenLite.to($(this).find(".card"), 1.2, { rotationY:(spun ? 0 : 180) }); spun = !spun; });

Thanks for everything Jamie! works now

How to start an animation when the visitor scrolls down?

By jaxi123
September 20, 2014 in GSAP

Moderator Tag

https://gsap.com/community/forums/topic/10553-how-to-start-an-animation-when-the-visitor-scrolls-down/

Go to solution Solved by jamiejefferson, September 26, 2014

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax.

Page 2 of 2

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign in

Already have an account? Sign in here.

https://gsap.com/community/forums/topic/10553-how-to-start-an-animation-when-the-visitor-scrolls-down/

Go to topic listing

Recently Browsing 0 members
- No registered users viewing this page.

Notifications

Messages

How to start an animation when the visitor scrolls down?

Warning: Please note

Recommended Posts

jaxi123

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members