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>