Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 08/09/2019 in all areas

  1. Yes, @PointC is right-on and I just wanted to add a couple of minor things: SVG doesn't have anything like z-index. It literally depends on the order of the elements in the DOM for stacking order, so you can get the effect you're after only by re-ordering things in the DOM dynamically. Totally possible, but @PointC's recommendation is probably easier and possibly more performant. Sine.easeIn, Sine.easeOut and Sine.easeInOut eases are probably perfect for this type of thing. Other easeIn/easeOut/easeInOut pairs could look nice too, but Sine waves are literally EXACTLY what drive this type of effect in the real world.
    2 points
  2. @SENPAI & @xraymutation, This is trickier than one can expect because instead of using RTG to animate the transition between route components, the idea is to animate in a full page overlay, change the rendered component based on the new route and then animate the overlay out. Normally in RTG you pass the component that matches the target route which is animated. One solution I can think of is to play with the entering and exiting API's from RTG in order to animate just the overlay and produce the route change using a set instance in the addEndListener in order to have everything working with GSAP's timing. Of course this is easier said than done. Hopefully during the weekend I'll have some time to check this, but I can't make any promises since I'm extremely tight right now time-wise. An alternative is to create an animation in the overlay and use react router's API to make the route changes using GSAP callbacks. The trade-off in this approach is that you loose the capacity of animating the route changes using the browser's forward and back buttons, in those cases the routes change without any animation. Let me know which approach you prefer and perhaps we can work out something together. Happy Tweening!!!
    2 points
  3. If you're pointing to the same URL to load GSAP, the browser will only load it once anyway because it'll tap its cache for it. There's no point in trying to manipulate iframes like that (unless I'm misunderstanding your question).
    1 point
  4. Sorry, I meant animate the divs, not the SVGs. Right now your parent divs (.priv-key-div and .pub-key-div) have no height because the child SVG is set to position:absolute. That's why your z-index isn't working. Make sense? Happy tweening.
    1 point
  5. I can try my best, it seems the issue would be present if I just took any path and then applied a transform via the attribute and then subsequently used that then it should show the problem manifest however I have to write that test case to show it. I will see if I can make another pen or modify that one to just have the data that counts and keep you updated. Same thing with the fill issue. Didn't mean to bog you down further, just wanted to try and show you what I was talking about
    1 point
  6. Except that, try to change "background-color" to backgroundColor, as these props should be camel cased.
    1 point
  7. I'd probably recommend separating the two into unique SVGs and put them in their own divs. Then you can take advantage of z-index. As for the easing, yes you should be able to create a smoother animation by adjusting the easeIn and out for your moves. You can also use a CustomEase. Happy tweening.
    1 point
  8. Hey Neil and welcome. A couple questions for you. Are you using TimelineLite (or perhaps TweenLite)? They are the only things that need the css: { } inside of the vars object. If that is what you are using, have you loaded the CSSPlugin? If that is not what you're using (you're using TimelineMax/TweenMax), you should move it outside of the css: { } like so: .to($DMPU_container, .5, {background-color:"#EBBB2C"}, "swop") Are you using a timeline? That's the only case where a label like "swop" makes sense. Besides that, we would probably need to see a minimal demo of your issue presented in something like a CodePen to help debug exactly what's going on. See the below thread on more information on how to do that.
    1 point
  9. Yep, I think @OSUblake was right on regarding the extra M0,0 command at the end, but I can add some code to MorphSVGPlugin to sense that condition and just throw those values away. Thanks for your thoughtful and thorough post, especially the reduced test case
    1 point
  10. Short answer: its container is being moved and changing width so it's hard for the browser to properly calculate the position of the element. I'd recommend placing it outside of the background that's animating.
    1 point
  11. Love hearing that! @mikel offered a great solution. Here's another example of basically the same idea: https://codepen.io/GreenSock/pen/8586b002d06797032bb34a647adc01b2
    1 point
  12. Before you start digging into source code, you should at least try troubleshooting your SVG code first. You have have a pointless m0 0 at the end here. <path id="source" style="" d="m256 421h30l60-135h-150zm0 0"/> Remove it, and it seems to work fine. <path id="source" style="" d="m256 421h30l60-135h-150z"/>
    1 point
  13. Hi @therddlr, Here is a pen showing how to both the line `y translate` and a reveal (using a parent with overflow hidden). I piggy-backed on jQuery (wrap , unwrap) to make it simple ... but you can find a native way to handle it if you are not using GSAP. Hope this helps!
    1 point
  14. thanks for the idea of using a master timeline. the final result:
    1 point
×