Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

gimperdaniel

Members
  • Content Count

    25
  • Joined

  • Last visited

Community Reputation

2 Newbie

About gimperdaniel

  • Rank
    Member
  1. I just noticed that the codepen posted Diaco.W does not work in Firefox. It seems that firefox only supports the url() method of clip-path.
  2. Here's my tween: TweenMax.to($(".myel.active .fact"),2,{y:"-=10",opacity:0,repeat:10,onComplete:nextFact}); nextFact is a function that determines the next element. So it pretty much removes .active class from one child and then assigns it to the next. However after the first run, nextFact updates the .active class, but TweenMax is still looking at the old element, and it keeps animating the old element, not the new child with a .active class. So... how do I tell TweenMax that .myel.active has changed?
  3. can you explain how your answer works? I am a bit confused.
  4. Thank You @Diaco.AW that solved my issue.
  5. I am probably approaching this the wrong way: I have a simple, timeline that I would like to play forward on mouseenter, and then in reverse on mouseout. var photo_zoom = new TimelineMax({paused:true}); photo_zoom.to(WHAT GOES HERE??,1, {scale:1.2}); $(".each-photo").hover(function(){ photo_zoom.play(); },function(){ photo_zoom.reverse(); }); Assuming that there's more than one element with class .each-photo, how do I pass the hovered element, to the timeline? Do I need to wrap whole timeline inside a function? Is there a way to pass parameters via
  6. My problem was solved by adding "immediateRender:true" to the TO element.
  7. I have a flip animation based on this codepen: http://codepen.io/anon/pen/vErBdO The flipping animation by itself works perfectly. However my "cards" have a :before and :after element. I noticed that sometimes the before and after element don't flip if the whole flipping animation inside a timeline. Code: CSSPlugin.defaultTransformPerspective = 1000; TweenMax.set($(".flipper .back"), {rotationY:-180}); $.each($(".flipper"), function(i,element) { var tl = new TimelineMax({paused:true}); tl.to($(this).children(".front"), 1, {r
  8. Never mind. I figured it out. I had my css defined as #myID.connector:after{} And I was trying to select just .connector:after{} It looks like that the CSSRulePlugin selection must have the exact same selector structure. So this works: CSSRulePlugin.getRule("#myID.connector:after");
  9. Here's my code: var connectors_tl = new TimelineMax({repeat:-1,onRepeat:change_position}); var connector_before = CSSRulePlugin.getRule(".connector:before"); var connector_after = CSSRulePlugin.getRule(".connector:after"); connectors_tl.add(TweenMax.to(".connector",1,{opacity:1,repeat:1,repeatDelay:3, yoyo:true})); connectors_tl.add(TweenMax.to(connector_before,1,{opacity:1})); I was basing my code on the example here: http://codepen.io/jamiejefferson/pen/ibHAt I already have the before and after defined in my css with opacity:0; What does the e
  10. Thank you guys. I am going to do some good reading and try out Rodrigo's solution. I did not even consider reversing the animation. Thanks!
  11. I am sure this is happening because I am not thinking the GSAP way... I am not there yet. I am trying to use jquery's hover with TweenMax. The animation works as expected, however if I move the mouse on and off fast, before the animation is completed, I get all sorts of weird behavior (.coords collapses, moves to the wrong spot and so on). I thought that using isTweening would fix the issue, but isTweening never returns true, even though it's obvious the animation is still going on. Maybe it's a matter of scope? $(".coords").hover(function(){ if(TweenMax.isTweening($(this)) ===
  12. Thanks. I was using add, to chain everything together, but I guess I don't need it.
  13. I noticed that you did not use "add". When is "add" necessary? Thanks for the example, that helped me to change my code and get it to work.
×