Jump to content

Anya

Members
  • Content Count

    15
  • Joined

  • Last visited

Community Reputation

18 Newbie

About Anya

  • Rank
    Member

Contact Methods

Profile Information

  • Gender
    Female
  • Location
    New York City

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. my 2 cents again)) @Jean-Tilapin First thing is you need to write your rotation values as relative instead of absolute, for ex "+=180", instead of 180, which means it will always add 180 on top of the current value. Second, as i far as i know from the docs, if you want to repeat your timeline but keep the final values, you can invalidate the timeline and restart it on completion, this way it forgets the recorded values. As for the delay between restarts, not sure about the best approach, but you could create a dummy tween with empty object after your animation. For ex.: var test = new TimelineMax({ onComplete: function(){test.invalidate().restart()}}); for(var i=0; i<nbLines; i++) { test .staggerTo($(".grid-line:eq(" + i + ") .hexagon-inner"), 1, {rotationY:'+=180', ease: Circ.easeOut}, 0.1, 0) .to({}, 3, {}) }
  2. @Jean-Tilapin just passing by here.. I think your issue is in the loop, you're targeting all "hexagon-inner" elements collection, instead of only those that belong to the "grid-line" that you're looping, and also the start position can be set to 0. This should work? test.staggerTo($(line).find(".hexagon-inner"), 0.5, {rotationY:'180'}, 0.2, 0);
  3. oh wow! thank you so much, It took me some time to understand what was wrong with my timelines returned via functions. Everything works like a charm now! ".pause(0)" did the trick the way I needed to reset to initial states. Million thanks your way!
  4. I'm making a game, where on different clicks, different animations are triggered that have nested timelines and tweens, and values that are being animated, for example "x, y, fill color, scale, velocity, gravity, bezier paths, autoAlpha, rotation etc" on different elements. When the game is over and to play the game again, I need to reset all those values to the initial ones so the user can play again. In 'clearTargetAnimations', I'm basically gathering all the targets from the functions that return timelines and nested timelines and clear all props on them. But with the inline transform, clearProps will remove those too, and I'm not sure what other method to use to basically reset elements styles to initial state.
  5. Hi guys, I'm having an issue with restarting a master timeline with nested timelines and understanding to how properly clear props from elements. Basically, I have svg that uses symbols that have inline transforms on them applied when exporting from Illustrator. I'm animating x and y values. Then on btn click, I would like to completely restart and reset the animation and elements transform to initial values. The issue is that when I clear all props or just transform, it's removing the inline transform values that are coming from svg. But I would want to revert them back to initial state. Is there a way to achieve it? Hope my demo is helpful enough to show. Thank you!
  6. Oh wow, @Sahil, this totally makes sense now, with the use of scrollTo to trigger the scrollMagic with the nested timelines. Thanks so much for your help!
  7. Hi guys! I have a question about the way of synchronizing Draggable with Scrollmagic scene. Basically i need to repeat exact same scene I have on scroll, but make it happen on drag of the progress bar. And can't figure out the right way to do it... Especially if the user decided to scroll when the progress bar is halfway.. Any suggestions? I set up a simple pen to demonstrate. Thanks so much for your amazing work!
  8. I just realized I can animate stop-opacity instead to make it work in Safari. But still curious about the rgba colors though
  9. Hey guys. Another Safari issue here. This probably refers to svg gradients more than the actual Tweenmax, but in case someone had this issue before and knows a workaround? I'm trying to animate the stop-color of the gradient to create transparency effect, but in Safari the color is just white with no alpha, and sometimes it doesn't animate at all. I'm not quite sure what is happening.. Any input would help! Thanks a bunch.
  10. Thank you guys, @OSUblake, you saved the day as usual translateZ fixed the clipping of the card in Safari. Btw, the Firefox version that I see the issue is the old Firefox51. In the newer versions this clipping does not happen.
  11. Hey guys, I'm having some weird stacking order issues in Firefox and Safari, maybe someone can put me in the right direction towards fixing it. I have 2 cards to flip, that are inline-block, side by side and have the corners overlapped (on purpose). While they are rotating, one card gets behind the other one for a brief moment until it gets the correct order. This happens in Firefox. Chrome is fine. Also, I can see a different issue in Safari that appeared recently, where rotation is not even visible. This did work a couple months ago and still works in my production code, but not on Codepen now. The stacking issue in Firefox is what really matters to me right now. I tried setting z-indexes, but that didn't help, so I understand it's rendering issue? How can I go around it? Thank you!
  12. Anya

    Tweening in click

    @OSUblake, works like a charm. Thank you, Blake.
  13. Anya

    Tweening in click

    Hi guys! Hoping to get some help on the current issue. I have a flip card that rotates 180 deg on each click. And depending on what dot a user clicks, the corresponding image is being used for the face of the card. The issue I have is that if a user clicks before the previous tween animation finishes, the rotation value gets added and then card rotates a little more. I would like on each click for the card to make a complete 180 rotation and probably prevent clicks if the card is still animating. How would I go about this? I'm using relative values '+=180' because absolute values were not giving me the result and IE was not cooperating either, only with relative rotation value I got a full effect of a 3d card cross browsers compatible. I have also tried to check if(!tl.isActive()) {} but didn't seem to give me the correct boolean.. Any advice is appreciated! Thank you!
  14. Anya

    Stagger groups of paths

    Thank you guys, both solutions helped!
  15. Hi guys, I'm trying to stagger groups of paths. I have 4 groups, that I want to simultaneously start drawing but stagger the paths inside of each group with 0.5s. Currently, I'm just writing it 4 times starting them at the same label, and repeating the same tween code. Is there a way to shorten the code so I don't repeat it 4 times? If I add elements into the array, the timing is off. I could also write a function and pass the elements, but would it start at the same time? Is there a keyword maybe in tweenmax stagger feature for this? Thank you! const tl = new TimelineMax(); tl .staggerFromTo( '[id^=top-left] path[id^=top-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=top-right] path[id^=top-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-left] path[id^=bottom-left]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" ) .staggerFromTo( '[id^=bottom-right] path[id^=bottom-right]', 2, { drawSVG: "100% 100%" }, { drawSVG: "0% 100%", onComplete: leafGrow }, 0.5, "draw-Level1-Vines" )