Jump to content
Search Community

Leaderboard

Popular Content

Showing content with the highest reputation on 07/19/2018 in all areas

  1. Hi @pauljohnknight That three second delay is your second tween: .to("#shape-2", 3, {morphSVG:"#shape-1", rotation: 180,ease: Power1.easeOut}) That morph is happening but #shape-2 is hidden so you see nothing. If I understand your desired outcome correctly, you only need the first tween on the timeline. Is that what you meant? Edit: Shaun is typing fast today.
    5 points
  2. I'm not entirely sure what your end goal is ... but does this get you closer?
    4 points
  3. ha...that's great! So have I. Just don't steal my navigation for my website! LOL ?
    3 points
  4. Hi @dada78 The Pixi plugin is a free plugin. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/plugins/PixiPlugin.min.js"></script> Here's a good pen that shows what's included: I'm not an Animate user so I don't have any .fla blur examples, but perhaps someone else can jump in with an example. Happy tweening.
    3 points
  5. The problem is you're targeting all the characters in each hover. The text is already split into divs so you could use an each() loop to create a timeline for each link and play/reverse that on hover, but target the divs in that <li> instead of the chars. Is this what you need it to do?
    3 points
  6. In fact it is only for simple cases like hover, even knowing that you can use GSAP to do the hover, sometimes the css solves with simplicity and everything there at the time of stylization. But his explanation was very enlightening. Many thanks Jack, not only for the explanation but for developing a tool that is certainly is the revolution of web animations ❤️
    2 points
  7. This is an amazing thread. I've learned so much from going through all the examples. @PointC you are the goat.
    2 points
  8. I'd echo @Sahil's advice about checking out the ScrollMagic demos and creating separate scenes. That being said, you can make it work with one timeline like you have it now. You'd just add your title fade tweens and some position parameter labels. More info about the position parameter: https://greensock.com/position-parameter Happy tweening.
    2 points
  9. The "?" and ":" are part of the ternary operator. It's basically a shorthand if/else // ternary tl.reversed() ? tl.play() : tl.reverse(); // if/else if ( tl.reversed() ) { tl.play(); } else { tl.reverse(); } More info: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator Calling the makeItWork() function twice isn't absolutely necessary. It's just a habit of mine. The jQuery hover() method is shorthand for mouseenter and mouseleave so it takes two handlers. In this particular case we want the same function called for both, but you may want different functions called for each event. I'm just in the habit of putting them both in even when they're the same, but in this case it would work fine with one. More info: https://api.jquery.com/hover/ Hopefully that helps. Happy tweening.
    2 points
  10. ScrollMagic supports horizontal scrolling, you need to set vertical property to false when defining controller. http://scrollmagic.io/examples/basic/going_horizontal.html Take a look at following thread for how you can scroll horizontally using mouse wheel. Using ScrollMagic horizontally will let you define your scenes as you want. Take look at other demos in the scrollmagic's examples page, it covers almost all possible scenarios.
    2 points
  11. I thought this was a SplitText opacity question? Is this what you needed?
    2 points
  12. 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!
    2 points
  13. [updated September 2, 2020] Good news: Google pushed GSAP to their CDN (for use with DoubleClick and AdWords ads). URLs can be found at: https://support.google.com/richmedia/answer/6307288#gs If you get news of other ad networks that have similar news to share, feel free to post here. Enjoy!
    1 point
  14. Thanks for both answers The problem was being caused by my second tween - I didn't realise when returning to the original svg shape with MorphSVG that you need to reference it in both parts of the tween. Shaun's tip of having the rotation outside of the morphing was very useful as well. Thanks again Paul.
    1 point
  15. I will definitely check the examples but your edit is pretty much what I'm trying to achieve. Thank you so much!
    1 point
  16. Hi @Fábio Novais Is this what you need it to do? Happy tweening.
    1 point
  17. This is interesting And, I think actually doing something a bit different (vs changing the cursor icon) could work well ... instead of changing the cursor icon you could 1. hide the cursor 2. tween the change of the menu icon while 3. tweening the position of the menu icon to the cursor position Here is a simple CodePen demonstrating the basics of this
    1 point
  18. hmm, I thought you asked this yesterday and we provided some answers for you. I'm having trouble finding that thread... do you know what happened to it?
    1 point
  19. 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.
    1 point
  20. Hi @swpowe Welcome to the forum. Sounds like a good job for a clip-path. (or mask) Hopefully that helps. Happy tweening.
    1 point
  21. 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.
    1 point
  22. 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.
    1 point
  23. Hi @Marme Welcome to the forum. Here's a quick demo using Pixi.js and a gradient mask rather than a blur filter. Maybe you can tinker with it a bit and see if it's a direction you want to go with your project. Hopefully it gives you some ideas. Happy tweening.
    1 point
  24. Also, there's a known Chrome bug (Mac only) that can cause 3D transforms to take unusually long to render (only noticeable under heavy pressure). Again, this has nothing to do with GSAP, but if you're on a Mac it may be making this perform even worse. The biggest issue is probably the very expensive filter and the amount of pixels you're asking the browser to push around on every tick. A PNG of the element already blurred is gonna perform WAY better than having the browser do the blurring for you with a filter. Canvas would likely also be smoother as well (maybe PixiJS?).
    1 point
  25. You already have a transform on that element so when you change the transform origin, it changes how those transforms are applied and you get a visual shift. Notice what happens in this demo without any GSAP when the transform origin changes: One suggestion would be to do your initial rotation with transform origin of "0 0" already set and use translateX, translateY to position it where it should be. Another option is to rotate the outer div as you are but apply the scale only to the image
    1 point
  26. It looks like this is the 3rd time you've posted a version of this question about your canvas project. In your most recent post (which you've now deleted), Jack gave you this answer: We're more than happy to help with GSAP related problems, but these general JS and canvas questions should be posted on a more general forum. Perhaps you could try Stack Overflow.
    1 point
  27. Performance optimization is a pretty huge topic, so it's very difficult to know exactly what's causing the problems on your particular page. In general, the biggest problem tends to be the browser's graphics rendering, so make sure you're affecting the smallest number of pixels possible, that the bounding box for those changes is as small as possible, and that you're not animating things that could affect document flow (like top/left, margin, etc.) If you still need some help, feel free to post a link or a reduced test case so we can see what's going on. Happy tweening!
    1 point
  28. That's because you're using point objects to draw the paths, but you're animating actual elements. You're not reconciling the two sets of values. In other words, when the first element moves (by animation), you're not updating the corresponding point's x/y values. You could probably just use the element's _gsTransform object directly instead: It's probably best to have a single "source of truth" for the data rather than splitting it apart as point objects and elements. I hope that helps.
    1 point
  29. Drop this into your <head> element and that error will be gone. <meta charset="utf-8"> Happy tweening.
    1 point
  30. @DjKarimi thanks for advocating for GSAP among your peers. I hope your enthusiasm rubs off on them While I'd admit that the particular code chunk you quoted from anime is indeed nice and concise, there are some tradeoffs performance-wise with implementing things that way (for any engine) which is why we didn't do that with GSAP. But it's entirely possible to get almost exactly the same concise code chunk with GSAP using a single helper function as I demonstrate here: Here's the helper function : function multiTo(target, duration, vars) { var tl = new TimelineMax(vars), copy = {}, reserved = {delay:1, onComplete:1, onCompleteParams:1, onCompleteScope:1, useFrames:1, onUpdate:1, onUpdateParams:1, onUpdateScope:1, onStart:1, onStartParams:1, onStartScope:1, onReverseComplete:1, onReverseCompleteParams:1, onReverseCompleteScope:1, onRepeat:1, onRepeatParams:1, onRepeatScope:1, yoyo:1, repeat:1, repeatDelay:1, data:1, paused:1, reversed:1, callbackScope:1, id:1, yoyoEase:1}, val, i, p, d, v; //create a copy of the vars object that doesn't have any of the values that are reserved for the timeline for (p in vars) { if (!reserved[p]) { copy[p] = vars[p]; } } for (p in copy) { val = copy[p]; if (val.push && val.length) { d = duration / val.length; for (i = 0; i < val.length; i++) { v = {ease:copy.ease}; v[p] = val[i]; tl.to(target, d, v, d * i); } delete copy[p]; } } tl.to(target, duration, copy, 0); return tl; } And here's how the GSAP call would look: var morphing = multiTo('#morphing .polymorph', 2, { attr: [ { points: '70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369' }, { points: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' }, { points: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' }, { points: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' } ], ease: Power1.easeOut, repeat:-1 }); Basically it just interprets an array of values as if you want them equally spaced inside the timeline. Also note that like most other engines, anime suffers from time leakage in loops, meaning that it uses a simplistic "when the animation is done, start the time over again" which isn't precise for the overall time. It's not a true loop. GSAP implements logic internally to avoid the leaking. Here's a demo comparing the two: Open the console and watch how the gap grows larger and larger in anime between the actual time and the animation's time. There will always be some amount of lag, up to one tick (typically less than 17ms), but anime keeps growing the gap on every iteration. It's noticeable if you watch the animations and see how they start off synchronized and then the drift after a while. GSAP remains true to the actual time, but anime falls behind. Anyway, is this what you were looking for?
    1 point
  31. Hi @smallio Your mask timeline breaks after the first click because its already been played. You can solve that by playing from the beginning of the timeline. maskTL.play(0) Hopefully that helps. Happy tweening.
    1 point
  32. Sorry, I'm a bit confused by this. You're saying that the animations are updating regularly because you see them running smoothly but the onUpdates are firing much slower or not at all? It would be great if you can post a very simple demo that clearly illustrates this happening so that we can see what is happening. Under extreme stress it is understandable that requestAnimationFrame (the heartbeat of GSAP) may not fire at a consistent 60fps, and you would see animations with some hiccups and some onUpdates not firing at consistent intervals. Again I'm not aware of any reason for an onUpdate callback not firing on each tick of the engine (when property changes get applied). Kind of curious why you would be using timeline._time (which is a private property for internal use) and not timeline.time() (public getter / setter).
    1 point
  33. Sorry, but we really can't look at a bunch of JS code in isolation and imagine what is happening in this type of scenario. There could be any number of factors (most likely related to your css and layout) that are causing this. I'm doubtful this is a GreenSock-related issue, but if you can create a reduced test case that only contains enough HTML / JS / CSS to replicate the problem we can take a peek at it and see if anything jumps out. It doesn't have to contain any of your production images or text, just a simple prototype. thanks!
    1 point
  34. It looks like InitialState is a TimelineMax instance (not a function). And if your goal is to have that animation run as soon as the other one completes, it's probably easier to just drop it into the same timeline accordingly rather than using an onComplete to call a function that runs another timeline/tween. But I had a hard time understanding exactly what you're trying to do here. You want the email address to fade in onClick, and then wait 5 seconds and fade out? Like this?: It seemed easier/cleaner to just create a timeline in the onClick and sequence 2 tweens. Does that help?
    1 point
  35. Hi @tomKnox That is the expected behavior with all the staggers going to the same location. You could add a .to() tween to the loop and target paths[0], paths[1] etc..., but I think this is good case for function based values. More info: https://greensock.com/function-based Happy tweening.
    1 point
  36. Hi Plastois, Welcome to the GreenSock forums. Glad to see that you are doing so well with GSAP! I want to commend you on providing such an excellent demo that so clearly illustrated the issue you were facing. Its such a big help! You wouldn't be believe how many there are that don't make the effort. Great job! You already did the hard work of dynamically figuring out the start time and durations based on the positions of your labels. The good news is you can use these values in a single tween without creating a new timeline as long as you add that tween AFTER you have put your other animations in. In the code below I'm using your dynamic values for the duration and position parameter tl.from(".pink", labelTimeEND - labelTimeSTART, {scaleX: 0.001, ease:Linear.easeNone}, labelTimeSTART) I gave the tween a Linear ease just so that its easier to see that it ends exactly when it should. ---- As for your second question 2) I set delay equal to "labelTimeSTART" time but it start before previous animation ends. Why? It seems that the delay that you set on the timeline "appears" to be ignored when you dynamically changed the duration of tl2 var tl2 = new TimelineLite({ delay: labelTimeSTART //4.1 }); tl2 .from(".pink", 10, {scaleX: 0.001}) .duration( labelTimeEND - labelTimeSTART ); in your example if you remove the duration() line the delay works fine. I will look to see if this is a bug, or just a side-effect due to necessary logic in the engine. Thanks again for the awesome demo, and welcome aboard! Let us know if you need any more help with this.
    1 point
  37. in fact I did not even know that there was a way to put the transiton only for certain attribute of style. By these and others I speak, living and learning, and learning from the best (GSAP Moderators). ❤️ Thank you for the explanation
    1 point
  38. That's because GSAP is stronger than CSS and it will beat up all CSS transitions. ? I think if you limit the CSS transition to background only, you should see the desired results. transition: .8s background ease-out Of course, you can always use GSAP for the hovers too and prevent all potential conflicts. Hopefully that helps.
    1 point
  39. Hi @jiggles78 , Welcome to the GreenSock Forum. Your idea is great. To use this slider code, you could do it like this (only a quick approach!): The wonderfull construct of @OSUblake, each Slide triggers a separate animation, is also feasible. Happy tweening ... Mikel
    1 point
  40. Hi @gsmas That's one of the strengths of GreenSock. More here ...: Understanding the Position Parameter Clear the position ... Mikel
    1 point
×
×
  • Create New...