Popular Content

Showing content with the highest reputation since 07/15/2018 in Posts

  1. 5 points
    If you just want the reverse to go faster, you can adjust the timeScale. tlMenu.reverse().timeScale(3); More info: https://greensock.com/docs/TimelineMax/timeScale() If you want a different ease for reverse(), we've had a few discussions about how to do it: https://greensock.com/forums/topic/9229-how-to-apply-different-easing-of-animation-normal-and-reverse/ https://greensock.com/forums/topic/8040-change-easing-for-timeline-reverse/ https://greensock.com/forums/topic/11702-reverse-elastic-ease-in-no-ease-reverse/ If you have other questions, it's usually best to provide a demo. More info: Hopefully that helps. Happy tweening.
  2. 5 points
    Just for comparison, here's the logo using a displacement map in Pixi.
  3. 5 points
    Hey Frunky! Allow me to butt in here. Animated displacement effect with SVG is not hardware accelerated and not performant at all. If that's the effect you are after, you will want to use Canvas (or a library that uses WebGL).
  4. 5 points
    the basic idea is to loop through the svgs, assign each one its own animation. When you mouseenter/mouseleave you then play and reverse that item's animation. As for keeping borders static you probably will need to nest the svg in a parent with overflow:hidden this should be a good starting point for you
  5. 5 points
    Hi and welcome to the GreenSock forums and Club GreenSock! Sorry to hear you are having troubles. To load GSDevTools there are 2 steps. 1: Make sure you are loading GSDevTools into your page, most commonly via a script tag. In your example it would be like <script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js'></script> <script src="js/GSDevTools.js"></script> <script src="js/index.js"></script> It doesn't matter if you load TweenMax from the CDN or locally 2: Activate GSDevTools using GSDevTools.create(); I've updated the demo you created to load and activate GSDevTools CodePen has a feature that lets you export Pens as zips so you can download and run them locally. I will PM you a version that works locally in just a minute.
  6. 4 points
    You can also use a gradient which gives you some interesting options. By setting both color offsets to either 0% or 100% and then tweening to the other end, you can create a solid color change or fill. It also allows you to quickly change things by changing the x/y attributes of the linearGradient itself. You can make it start from the other end, switch to horizontal or diagonal. Just another option for you. Happy tweening.
  7. 4 points
    Hi @swpowe Welcome to the forum. Sounds like a good job for a clip-path. (or mask) Hopefully that helps. Happy tweening.
  8. 4 points
    Since staggers expect the first parameter to be an array of targets, you've gotta handle things a bit differently. I whipped together a "staggerArray()" helper function for you (customize as you see fit): var a = [0, 0, 0, 0]; staggerArray(a, [10,20,30,40], {duration:1, stagger:0.5, round:true}); //vars accepts: duration, stagger, round, as well as any typical vars for TimelineMax (like onComplete, onUpdate, repeat, yoyo, etc.) function staggerArray(start, end, vars) { var tl = new TimelineMax(vars), proxy = {}, duration = vars.duration || 0, stagger = vars.stagger || 0, proxyUpdate = function(original, proxy, i) { return function() { original[i] = proxy[i]; }; }, v, i; for (i = 0; i < start.length; i++) { proxy[i] = start[i]; v = {}; v[i] = end[i]; v.onUpdate = proxyUpdate(start, proxy, i); if (vars.round) { v.roundProps = i + ""; } tl.to(proxy, duration, v, stagger * i); } return tl; } Here it is in action: Does that help?
  9. 4 points
    Hi and welcome to the GreenSock forums, Thanks for the demo. Does reversing the animation do what you want?
  10. 3 points
    I don't think you can. "AMP HTML uses a set of contributed but centrally managed and hosted custom elements to implement advanced functionality such as image galleries that might be found in an AMP HTML document. While it does allow styling the document using custom CSS, it does not allow author written JavaScript beyond what is provided through the custom elements to reach its performance goals." https://www.ampproject.org/docs/fundamentals/spec Also "Transition and animation are subject to additional restrictions. AMP must be able to control all animations belonging to an ad, so that it can stop them when the ad is not on screen or system resources are very low." https://www.ampproject.org/docs/ads/a4a_spec#allowed-amp-extensions-and-builtins & here's more specific info about how to create these ads: https://www.ampproject.org/docs/ads/create_amphtml_ad
  11. 3 points
    Holy sh*t, that did it. My man! I'll do a CodePen next time. Thanks!
  12. 3 points
    It looks like they're using three.js and that's the displacement map for the transition. You could make it happen with a Pixi displacement filter too. http://pixijs.io/pixi-filters/tools/demo/ http://pixijs.download/dev/docs/PIXI.filters.DisplacementFilter.html You'll want to use a Power of two image (512x512, 256x256, etc.) for the best results. Good luck with your project.
  13. 3 points
    Hi @PointC, Thanks so much for basically doing it for me. I can't say I expected that! Massive relief though....:o) I'll certainly be taking a look a the recommended thread. Also looking at your pen I see I was quite far away from a decent solution and really approaching the task in the wrong way. Right now I need to work that into a project quickly but I'll be back to ask a couple of questions if I'm not sure how or why you've done something. Hope that's ok... I expect I'll be asking a fair few questions around here as a new job will be requiring me to get to grips with GASP pretty quick as animating UI's seems to be a bit of a thing.... looks like it's going to be interesting though. Many thanks again Regards Mark
  14. 3 points
    Hi @mjwlist Welcome to the forum. If you'll be animating things around a flex container you may want to take a look at this thread: That being said, you can make it work with xPercent. With only three cards I think just reassigning the card position via their index and then animating would be an easy solution. Maybe something like this: I'd also note that you shouldn't mix CSS transitions with GSAP animations as that can result in a fight for control of the element and produce undesirable results. Hopefully that helps. Happy tweening and welcome aboard.
  15. 3 points
    I'm not sure I follow everything correctly. You said you wanted the main links to display the same initial SplitText animation on hover? Since those links have already animated into view on load, how did you want them to have the same animation? Should the letters disappear and animate in again? Most anything is possible. I'm just not sure what should be happening here. Changing color on hover: are you targeting the <li> or the <a>? If you're creating a timeline in an each() loop for those .menuLinks you'll want to target the <a> element. So something like this: tl.to($(this).find("a"), 1, {color:newColor}, 0) I also didn't see any timelines or animations for those main links in your new pen. Maybe you're still working on it? If you can start putting those timelines together with what you want to happen we can most likely point you in the right direction. Happy tweening.
  16. 3 points
    Hi @jiggles78 I'd recommend focusing on one animation piece at a time and try to recreate it. It's like the old saying: "You eat an elephant one bite at a time." Eventually all those little animations will make a great website. I don't know of any tutorials that will take you through every aspect of the showcase sites, but Petr Tichy has a deconstruction playlist on his YouTube channel. You may find it helpful. https://www.youtube.com/user/ihatetomatoesblog/playlists Hopefully that helps. Happy tweening.
  17. 2 points
    Yeah - a demo would be most helpful. You said you have several different titles, but want to make it work without a loop? I was a little confused by that and how it differs from the solution I gave you in the other thread. As @Carl mentioned, I'm sure we can help with some more info.
  18. 2 points
    Hi amihanya, Thanks for asking about this. As seen in the info ohem provided, its clear that a foundational principle of AMP is to heavily restrict what developers can do with their pages. AMP is all about everything looking and performing the same way (to ensure super fast load time and performance). They don't want developers meddling around and coming up with new transitions / effects for image galleries, UI elements or anything else. The types of award winning sites (such as found in our showcase) that professional animators, developers, and designers love to build are pretty much what AMP doesn't want to support. Oh, and just a little note: it's GreenSock, not Greenshock Thanks for your support. Glad to see you enjoying GSAP!
  19. 2 points
    Not exactly sure what you need. It would really help if you could produce a reduced test case that clearly illustrates the problem. If you give us just a basic setup of HTML/CSS/JS with a clear explanation of what you need, i'm sure we can help.
  20. 2 points
    PointC Thank You! Exactly what I'm looking for. I appreciate the help!
  21. 2 points
    Back in the day, I would do the whole 9 yards... Minify HTML, CSS, JS, SVG, compress the images, inline some of the assets. If you have a limited amount of KB, you have to squeeze the orange all the way, man.
  22. 2 points
    Erm...? Pretty illustration...
  23. 2 points
    @Carl meant that we can't really troubleshoot a live site (or page) as we have no idea what should be happening and no way to edit the code. If you can create a simplified demo that shows the GSAP related problem, we're more than happy to help with that. Thanks and happy tweening.
  24. 2 points
    I’m looking for talented developers with high animation skills. I work for an agency specialized in developments of campaigns for big brands. These are good examples of the quality we are looking for: https://bannerboy.com/brain/?post=converse-chuck2-knit-320x480 https://bannerboy.com/brain/?post=google-gsp16-bike-300x250 https://bannerboy.com/brain/?post=duracell-gamer-halo-300x250 For more information please send me an email here with your portfolio. thanks!
  25. 2 points
    Just to add a little more clarity, when a property has a CSS transition applied, ANY change to that property will be delayed by the browser and gradually applied according to the duration you set on the CSS transition. So let's say you've got a 1-second CSS transition applied on an element and then you do a GSAP opacity tween from 0-1 with a duration of 0.5 seconds. Well, GSAP sets the value on every tick (60 times per second) and every single time, the browser says "oh, I'm not gonna show that right away...since there's a CSS transition applied, I'm gonna take a whole second to gradually make that change that GSAP just applied." So your 0.5-second GSAP tween looks weird and takes a lot longer (1.5 seconds in this case) because the CSS transitions are getting in the way. I hope that helps explain what was going on under the hood and why it's generally not a good idea to mix JS animations with CSS ones. Happy tweening!
  • Newsletter

    Want to keep up to date with all our latest news and information?

    Sign Up