jaxi123

Thanks for everything Jamie! works now

Thanks for the help Jamie, so i somehow got it working (almost working actually) http://codepen.io/jaxi123/pen/afwBj the problem is that the cards shows the wrong face? it should show the .frontcaland then flip to .backcal on click. however it starts on .backcal also is this code in the codepen right Jamie? and how would i make the card spin back to original position when clicked again?

can you help me out with this code: http://codepen.io/jaxi123/pen/gdayB i am not sure why it's not working, the cards should flip when clicked.

but that dosent solve the question which is: "how does one tween work with jquery 1.11.0 while the others does not?"

okay, so i got it to work on my page by loading jquery with this: <script src='http://codepen.io/assets/libs/fullpage/jquery.js'> however, when i load that another tween stops working: <script> TweenLite.set(".cardWrapper", {perspective:800}); TweenLite.set(".card", {transformStyle:"preserve-3d"}); TweenLite.set(".backcal", {rotationY:-180}); TweenLite.set([".backcal", ".frontcal"], {backfaceVisibility:"hidden"}); $(".cardWrapper").click( function() { TweenLite.to($(this).find(".card"), 1.2, {rotationY:180}); }, function() { TweenLite.to($(this).find(".card"), 1.2, {rotationY:0}); }); TweenLite.set(".cardWrapper2", {perspective:800}); TweenLite.set(".card2", {transformStyle:"preserve-3d"}); TweenLite.set(".backcal2", {rotationY:-180}); TweenLite.set([".backcal2", ".frontcal2"], {backfaceVisibility:"hidden"}); $(".cardWrapper2").click( function() { TweenLite.to($(this).find(".card2"), 1.2, {rotationY:180}); }, function() { TweenLite.to($(this).find(".card2"), 1.2, {rotationY:0}); } ); TweenLite.set(".cardWrapper3", {perspective:800}); TweenLite.set(".card3", {transformStyle:"preserve-3d"}); TweenLite.set(".backcal3", {rotationY:-180}); TweenLite.set([".backcal3", ".frontcal3"], {backfaceVisibility:"hidden"}); $(".cardWrapper3").click( function() { TweenLite.to($(this).find(".card3"), 1.2, {rotationY:180}); }, function() { TweenLite.to($(this).find(".card3"), 1.2, {rotationY:0}); } ); TweenLite.set(".cardWrapper4", {perspective:800}); TweenLite.set(".card4", {transformStyle:"preserve-3d"}); TweenLite.set(".backcal4", {rotationY:-180}); TweenLite.set([".backcal4", ".frontcal4"], {backfaceVisibility:"hidden"}); $(".cardWrapper4").click( function() { TweenLite.to($(this).find(".card4"), 1.2, {rotationY:180}); }, function() { TweenLite.to($(this).find(".card4"), 1.2, {rotationY:0}); } ); TweenLite.set(".cardWrapper5", {perspective:800}); TweenLite.set(".card5", {transformStyle:"preserve-3d"}); TweenLite.set(".backcal5", {rotationY:-180}); TweenLite.set([".backcal5", ".frontcal5"], {backfaceVisibility:"hidden"}); $(".cardWrapper5").click( function() { TweenLite.to($(this).find(".card5"), 1.2, {rotationY:180}); }, function() { TweenLite.to($(this).find(".card5"), 1.2, {rotationY:0}); } ); TweenLite.set(".cardWrapper6", {perspective:800}); TweenLite.set(".card6", {transformStyle:"preserve-3d"}); TweenLite.set(".backcal6", {rotationY:-180}); TweenLite.set([".backcal6", ".frontcal6"], {backfaceVisibility:"hidden"}); $(".cardWrapper6").click( function() { TweenLite.to($(this).find(".card6"), 1.2, {rotationY:180}); }, function() { TweenLite.to($(this).find(".card6"), 1.2, {rotationY:0}); } ); </script> which worked fine when i were using Jquery 1.4.2 but the codepen code by Jamie only works with: <script src='http://codepen.io/assets/libs/fullpage/jquery.js'> Super Wierd.

thanks again for all the answers, i'll give it a shot. I know that you are focused on strictly Gsap and i really appreciate you going the extra mile for me. Thank you!

Okay, so i cant get this to work on my site, i cant even make a codepen that works copy pasting from your working codepen into my own, i am thinking this might be caused by loading scrollmagic the wrong way, how did you load it into your codepen?

Thanks!

Hi, so i want to activate this animation: http://codepen.io/jaxi123/pen/zuylB/ whenever someone scrolls to it, using scrollmagic. I've tried but just cannot get it to work, all help is appreciated.

okay, i really cant figure this out. but i created a codepen that you can have a look at: http://codepen.io/jaxi123/pen/zuylB/ how would i use scrollmagic to trigger the tweens?

ok, so i tried making it a timeline max like this: <script> $(document).ready(function($) { var tween = new TimelineMax(); tl.to(godtdesign, 1, {opacity:1.0, delay:1.0}) tl.to(direktesalg, 1, {opacity:1.0, delay:2.0}) tl.to(butik, 1, {opacity:1.0, delay: 4.0}) tl.to(patenter, 1, {opacity:1.0, delay:3.0}) tl.to(funktioner, 1, {opacity:1.0, delay:2.0}) tl.to(sponsor, 1, {opacity:1.0, delay:1.0}) .staggerFrom(["#brick1", "#brick2", "#brick3", "#brick4", "#brick5", "#brick6", "#brick7", "#brick8", "#brick9", "#brick10", "#brick11", "#brick12", "#brick13", "#brick14", "#brick15", "#brick16", "#brick17", "#brick18", "#brick19", "#brick20"], 0.2, { y: -400, opacity: 0},0.2) .staggerFrom(["#rbrick1", "#rbrick2", "#rbrick3", "#rbrick4", "#rbrick5", "#rbrick6", "#rbrick7", "#rbrick8"], 0.2, { y: -400, opacity: 0},0.2); // build scene var scene = new ScrollScene({triggerElement: "#container"}) .setTween(tween) .addTo(controller); // show indicators (requires debug extension) scene.addIndicators(); }); </script> however, still not working. what i am i doing wrong here ?

So now i am trying to start the animation when the user scrolls to it using this code just before my container div <script> var controller; $(document).ready(function($) { // init controller controller = new ScrollMagic(); }); </script> and this code to trigger the tween with scrollmagic <script> 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"); TweenMax.to(godtdesign, 1, {opacity:1.0, delay:1.0}); TweenMax.to(direktesalg, 1, {opacity:1.0, delay:2.0}); TweenMax.to(butik, 1, {opacity:1.0, delay: 4.0}); TweenMax.to(patenter, 1, {opacity:1.0, delay:3.0}); TweenMax.to(funktioner, 1, {opacity:1.0, delay:2.0}); TweenMax.to(sponsor, 1, {opacity:1.0, delay:1.0}); var tween = TweenMax.staggerFrom(["#brick1", "#brick2", "#brick3", "#brick4", "#brick5", "#brick6", "#brick7", "#brick8", "#brick9", "#brick10", "#brick11", "#brick12", "#brick13", "#brick14", "#brick15", "#brick16", "#brick17", "#brick18", "#brick19", "#brick20"], 0.2, { y: -400, opacity: 0},0.2); TweenMax.staggerFrom(["#rbrick1", "#rbrick2", "#rbrick3", "#rbrick4", "#rbrick5", "#rbrick6", "#rbrick7", "#rbrick8"], 0.2, { y: -400, opacity: 0},0.2); // build scene var scene = new ScrollScene({triggerElement: "#container"}) .setTween(tween) .addTo(controller); // show indicators (requires debug extension) scene.addIndicators(); }); </script> however that does not work, i've tried following the example on the scrollmagic website but to no success..

thanks alot guys! i got it to work with this: <script>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"); TweenMax.to(godtdesign, 1, {opacity:1.0, delay:1.0}); TweenMax.to(direktesalg, 1, {opacity:1.0, delay:2.0}); TweenMax.to(butik, 1, {opacity:1.0, delay: 4.0}); TweenMax.to(patenter, 1, {opacity:1.0, delay:3.0}); TweenMax.to(funktioner, 1, {opacity:1.0, delay:2.0}); TweenMax.to(sponsor, 1, {opacity:1.0, delay:1.0}); TweenMax.staggerFrom(["#brick1", "#brick2", "#brick3", "#brick4", "#brick5", "#brick6", "#brick7", "#brick8", "#brick9", "#brick10", "#brick11", "#brick12", "#brick13", "#brick14", "#brick15", "#brick16", "#brick17", "#brick18", "#brick19", "#brick20"], 0.2, { y: -400, opacity: 0},0.2); TweenMax.staggerFrom(["#rbrick1", "#rbrick2", "#rbrick3", "#rbrick4", "#rbrick5", "#rbrick6", "#rbrick7", "#rbrick8"], 0.2, { y: -400, opacity: 0},0.2); </script> now ill starting the animation when the element is visible on the page with scrollmagic. AncientWarrior, i would like to start the animation when it's visible, no parrallax.

<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() { 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}); TweenMax.staggerfrom(["#brick1", "#brick2", "#brick3", "#brick4", "#brick5", "#brick6", "#brick7", "#brick8", "#brick9", "#brick10", "#brick11", "#brick12", "#brick13", "#brick14", "#brick15", "#brick16", "#brick17", "#brick18", "#brick19", "#brick20"], 0.2, { y: -400, opacity: 0 }, 0.2); TweenMax.staggerfrom(["#rbrick1", "#rbrick2", "#rbrick3", "#rbrick4", "#rbrick5", "#rbrick6", "#rbrick7", "#rbrick8"], 0.2, { y: -400, opacity: 0 }, 0.2); } </script> Does not work either?

Im sorry but i cant get any of that code to work.. example: <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"); //The last parameter with value of .25 is the stagger amount. Try changing it to 1 see how it impacts the animation. 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}); TweenMax.staggerfrom([rbrick1, rbrick2, rbrick3, rbrick4, rbrick5, rbrick6, rbrick7, rbrick8], 0.2, { y: -400, opacity: 0 }, 0.2); } </script>

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

helps alot! thank you!

Hey guys, so i have a question about tweening a div with a class, i already know how to tween a div with an ID like this: ------------------------------------------------------------------------------------------------------------------------------ <script> window.onload = function() { var div1 = document.getElementById("div1"); TweenLite.to(div1, 1, {opacity:1.0, delay:1}); } </script> ------------------------------------------------------------------------------------------------------------------------- now, how would i do the same thing to a div class?

Thanks Carl! this have been really helpful!

thank you very much i see that this might be a complicated task for a fresh beginner like me, but i am sure i will be able to figure something out from the code that you provided. now, i have a last question. Would creating 27 different divs and tweens ruin performance or would it still run smooth on the majority of computers or internet connections?

hey guys! so basically i want to create an animation where blocks fade in from opacity: 0.0 and then drop on top of eachother and build a tower from those blocks, they should not sit perfectly on top of eachother but instead a little random and misplaced like each block have different "margin-right", "margin-left" and "margin-top" now, here is how i would do it: ------------------------------------------------------------------------------------------------------------------------------------------------------------------ <style> #blockbox{ float: left; } #block1 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-left: 20px; } #block2 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-right: 20px; } #block3 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-right: 30px; } #block4 { position: relative; width: 200px; height: 34px; background-color: #b3c8cd; opacity: 1.0; margin-top: 30px; margin-left: 40px; } </style> <div id="blockbox"> <div id="block1"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Butiks Salg</p></div> <div id="block2"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Dyre Patenter</p></div> <div id="block3"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Uendelige Funktioner</p></div> <div id="block4"><p style="display: block; vertical-align: middle; line-height: 34px; text-align: center;">Dyre Sponsorater</p></div> </div> <script> window.onload = function() { var block1 = document.getElementById("block1"), block2 = document.getElementById("block2"), block3 = document.getElementById("block3"), block4 = document.getElementById("block4"); TweenLite.from(block1, 1, {opacity:0, top:"300px", delay:1}); TweenLite.from(block2, 1, {opacity:0, top:"300px", delay:2}); TweenLite.from(block3, 1, {opacity:0, top:"300px", delay:3}); TweenLite.from(block4, 1, {opacity:0, top:"300px", delay:4}); } </script> ------------------------------------------------------------------------------------------------------------------------------------------------------------------ now, thats all good. thing is i have 27 blocks.. do i really need 27 tweens and "div=id" to do this? or is there some way to randomize their horizontal position within a specific space? what i am doing here just seems wrong, but i dont know. i've only got 1 day of experience with javascript and a few hours with gsap.. thank you! - jonas.