Jump to content
Search Community

rob83

Members
  • Posts

    6
  • Joined

  • Last visited

rob83's Achievements

0

Reputation

  1. rob83

    Simple Carousel

    Thanks, guys! think you're right, Rodrigo. I'll just go for single tweens instead of the timeline.
  2. rob83

    Simple Carousel

    Hi, I'm kind of stumped with building a very simple carousel: http://caroussell.yrnet.de/ It runs perfectly if I don't use the left and right buttons it's just a mess. Has anyone of you ever built some carousel like this and would be willing to share it? Thanks so much, Rob
  3. Hey Rodrigo, sorry for the late reply and thanks for the great help. I tried your solution it and initially it didn't work but I guess it's due to how I created my timeline. I use the "from" method and the timeline is initially set to it's reversed status. So I first have to change the playing order. I think it should work then. So thanks agian! Cheers, Robert
  4. Hi, is there a way to change the easing method of a tween in a timeline when reversing the timeline? My example.: var tlDrops = new TimelineMax({paused:true, delay:2, reversed:true}); tlDrops.from("#geschenkedrops", 0.2, {bottom:0, right:15, ease:Back.easeOut}, "starting") .to("#geschenk", 0.5, {autoAlpha:0}, "-0.1") .to("#merci-button", 0.5, {autoAlpha:1}, "-0.1") .from("#hauptgeschenk", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:180, ease:Elastic.easeOut}, "geschenke") .from("#geschenk2", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:160, ease:Elastic.easeOut}, "geschenke") .from("#geschenk3", 0.5, {bottom:25, right:25, width:1, height: 1, rotation:140, ease:Elastic.easeOut}, "geschenke") .from("#close-button", 0.2, {bottom:25, right:25, ease:Sine.easeOut}) .to("#geschenkedrops", 0, {autoAlpha:1}, "closing"); Now I would like to change all Elastic.easeOut easing methods into a different method (e.g. sine.easeIn) on timeline reverse. Is that possible, or do I need to create an extra timeline for the reverse function? Thanks so much, Rob
  5. Works great. Thank you very much, Carl!
  6. Hello, I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation. I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline? Something like this: <div id="navipoint-board"> <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div> <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div> <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div> <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div> <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div> <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div> </div> <script type="text/javascript"> $(document).ready(function() { TweenMax.to($('.navipoints a img'), 0, {rotation:"20"}); var tlRotation = new TimelineMax({paused:true}); tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"}); $('.navipoints a img').mouseenter(function() {tlRotation.play(this);}); $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);}); }); </script> Thank you very much, Robert
×
×
  • Create New...