Jump to content
Search Community

How to start an animation when the visitor scrolls down?

jaxi123 test
Moderator Tag

Go to solution Solved by jamiejefferson,

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. 

Recommended Posts

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
Link to comment
Share on other sites

You could listen for window scroll events https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll and trigger your tweens once the window has scrolled enough to your element. If you're after something that handles it for you, there are some third party scrolling tools available that use GSAP, like ScrollMagic http://janpaepke.github.io/ScrollMagic/.

 

I'll also point out that all of your from() tweens have an erroneous parameter (0.05). from() only has three parameters: target, duration, and vars. You should also avoid the trailing commas in objects (after your delays) if you want the page to work in IE8 or lower.

 

Also, you can condense that code a LOT using TweenMax:

// pass an array of elements to create staggered tweens
TweenMax.staggerfrom([brick1, brick2, ..., brick20], 0.2, { y: -400, opacity: 0 }, 0.2);
TweenMax.staggerfrom([rbrick1, rbrick2, ..., rbrick8], 0.2, { y: -400, opacity: 0 }, 0.2);
// and if you're using classes on the brick elements you can remove the need for brick vars:
TweenMax.staggerfrom(".brick", 0.2, { y: -400, opacity: 0 }, 0.2);
TweenMax.staggerfrom(".rbrick", 0.2, { y: -400, opacity: 0 }, 0.2);
// and (assuming there aren't #brick21/#rbrick9 you don't want to animate here) since you mention jQuery,
// the classes aren't required (jQuery isn't actually required for this except for <= IE7):
TweenMax.staggerfrom("[id^='brick']", 0.2, { y: -400, opacity: 0 }, 0.2);
TweenMax.staggerfrom("[id^='rbrick']", 0.2, { y: -400, opacity: 0 }, 0.2);
// but if you just want to define the ids directly:
TweenMax.staggerfrom(["#brick1", "#brick2", ..., "#brick20"], 0.2, { y: -400, opacity: 0 }, 0.2);
TweenMax.staggerfrom(["#rbrick1", "#rbrick2", ..., "#rbrick8"], 0.2, { y: -400, opacity: 0 }, 0.2);
  • Like 2
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

<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?

Link to comment
Share on other sites

1. Has TweenMax been loaded or were you just loading the TweenLite and CSSPlugin files? When using TweenMax, the only file required is TweenMax.js since it includes TweenMax, TimelineMax, CSSPlugin and more
2. The second attempt will have an error since you removed all of the variables: This should work better:

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);
}

If you can't get it to work, please create a simple Codepen demo so we can take a look. When all we know about a problem is "does not work", debugging the issue with just a snippet of javascript is rather difficult.

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

When you create your tween variable it needs to be a single tween or a timeline. TweenMax.staggerFrom() creates an Array of tweens.

 

try replacing

 

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);
with
var tween = new TimelineLite();

tween.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);
  
tween.staggerFrom(["#rbrick1", "#rbrick2", "#rbrick3", "#rbrick4", "#rbrick5", "#rbrick6", "#rbrick7", "#rbrick8"], 0.2, { y: -400, opacity: 0},0.2);
  • Like 1
Link to comment
Share on other sites

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 :)?

Link to comment
Share on other sites

Hi,

 

The issue could be that you're not adding the semi-colons after instantiating the timeline's instances. Also you don't need to call to tl every time, remember that the methods are chainable, so you could reduce your code to this:

var tween = new TimelineMax();    

tl
  .to(godtdesign, 1, {opacity:1.0, delay:1.0})
  .to(direktesalg, 1, {opacity:1.0, delay:2.0})
  .to(butik, 1, {opacity:1.0, delay: 4.0})
  .to(patenter, 1, {opacity:1.0, delay:3.0})
  .to(funktioner, 1, {opacity:1.0, delay:2.0})
  .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);

Also your variable is called tween and you're referencing a timeline called tl, that doesn't exists so you're calling a method that tl doesn't have, you have to reference to tween or change the variable name.

 

Finally, is always better to see a live reduced sample that we can edit (codepen, fiddle, jsbin), is always harder and slower to solve issues just with code.

 

Rodrigo.

  • Like 1
Link to comment
Share on other sites

We don't usually provide support for 3rd party plugins like ScrollMagic here as we like to keep focused on GSAP support. I've modified your codepen to use a single timeline

See the Pen qDkjI by jamiejefferson (@jamiejefferson) on CodePen

as mentioned by Rodrigo. Before we can really go any further here, you would need to modify this further to provide:

  • A page that is long enough to be able to scroll
  • A clear indication of what element has to be reached to activate the timeline
  • Your attempt at adding ScrollMagic code to activate this timeline

 

 

[EDIT] Nevermind, it was like 3 lines of code in their first example. ScrollMagic/examples/basic/simple_tweening.html Same codepen link.
 
In future, if you require assistance with ScrollMagic functionality please refer to their help guidelines ScrollMagic/docs/#toc5
Of course if you have issues or questions about GSAP however we are glad to help.

  • Like 2
Link to comment
Share on other sites

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? 

Link to comment
Share on other sites

First, I would like to acknowledge that it was very nice of Jamie to go the extra mile and make the ScrollMagic demo.

 

Jaxi, the best place for you to start is open your browser console and see if you are having any errors. (chrome: right-cick > inspect element > console)

 

Next, I would suggest you visit Jamie's demo,

http://codepen.io/jamiejefferson/pen/qDkjI

click the Share button and chose the export zip option.

Then you can open up the html file locally and see how the scripts are loaded.

 

In the CodePen editor, you click on the gear next to the JS panel header to see what external scripts are being loaded

codepen.png

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Thanks for the help Jamie, so i somehow got it working (almost working actually) 

See the Pen afwBj by jaxi123 (@jaxi123) on CodePen

the problem is that the cards shows the wrong face? it should show the 

.frontcal
and 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?

Link to comment
Share on other sites

  • Solution

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;
});
  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...