Jump to content
Search Community

Leaderboard

Popular Content

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

  1. PointC test
    Drop this into your <head> element and that error will be gone. <meta charset="utf-8"> Happy tweening.
    3 points
  2. plastois test
    Wow, thank you for such a quick response. This is exactly the solution that I wanted to achieve! I did not think that one TimelineLite can be called twice without overwriting the previous one! For now, I know everything that I need and I am going to take an animation along the SVG path Thank you for this very nice welcome and support. It is not often that such a positive community is found.
    3 points
  3. Jimmi Heiserman test
    SOLVED, UTF-8 That was it! Thanks. Weird that this just burned me on my own domain, and not on a local server or codepen.io? Again, thanks for the quick team-effort response.
    2 points
  4. GreenSock test
    @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?
    2 points
  5. Carl test
    I didn't slow anything down (only the video so you could see each state). My connection was somehow naturally slow and I was able to see the site in its "pre-styled" state. You can throttle your network connection (make page load slow) using Dev Tools: https://css-tricks.com/throttling-the-network/ I'm not really sure what webpack may or may not being doing but you need to test if delaying the splitting of the text fixes the issue. Maybe use a setTimeout or TweenLite.delayedCall() to delay the function that splits your text and does the animation by 5 seconds or so. If you confirm that waiting to split the text solves the issue, then use a more reliable method of waiting until the page is loaded and ready: https://stackoverflow.com/questions/1033398/how-to-execute-a-function-when-page-has-fully-loaded
    2 points
  6. Carl test
    Thanks for the demo. Although there is a ton of code and I was hoping for something much simpler where we could just split and revert the code with no animation, I was fortunate enough to see the page load slowly. It appears your entire page renders before loading animation and the fancy page build. Previously, @GreenSock mentioned: I recorded your page loading and noticed that on initial render (before styles are applied) that the text will break differently than it would with the styles applied. Although I can't verify this in your code, it appears from the video below that you are splitting your text BEFORE the styles are applied and thus they split differently than they would with the styles applied. This also explains the odd jump when you revert(). In the video below I have outlined the first line before styles are rendered. You can see that the animation of that line then breaks onto 2 lines because the container or the size of the text changes AFTER the styles are applied. splittext.mp4 My suggestion is to make sure the page is fully rendered with all styles applied (also make sure custom fonts are applied) BEFORE splitting the text.
    2 points
  7. Carl test
    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).
    2 points
  8. Carl test
    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!
    2 points
  9. PointC test
    You can send me the link via PM and I'll take a quick peek at it.
    2 points
  10. Carl test
    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.
    2 points
  11. GreenSock test
    Yeah, this is definitely isn't a trivial task, but I took a crack at it for you: A few things to note: I simplified a lot of the code using some boilerplate functions for creating SVGs and setting attributes. I used a liveSnap to implement the bounds manually. It was simpler to just use a Draggable for the overall group, and use the center, line, and outer edge elements as the "trigger". That way, the bounds are applied to the overall group very easily. This whole thing would have been super simple if it wasn't for the custom logic necessary to limit the outer circle based on its radius in relation to the edges. That was the tricky piece - definitely an edge case. I sure hope that helps. Hopefully you'll see enough value to join Club GreenSock
    1 point
  12. PointC test
    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
  13. harp30 test
    Done and done!!! Thank you so very much. I did a setTimeout function and gave a time of 3 seconds and it works very well and as expected! So the styles do need to load in first - its a webpack issue its not injecting the css file into the index.html. So, I gotta find out how to place css file into the html file without having to load it via js as webpack does. Maybe I can create a overlay bar and it takes 3 seconds to load and once loaded I can run the function..hmm lets see. Thank you so very much! Spent a day on this and have troubled you enough. Thank you thank you thank you!!!!
    1 point
  14. Carl test
    Sorry, I have no idea what I'm supposed to be looking at on your live site or what 90% of the code you have pasted is supposed to do. I don't use ScrollMagic enough to understand what pushFollowers and other properties mean. But even the GSAP code leaves lots of questions: TweenMax.fromTo(".c2", 1, { y: "100%" }, { y: "0%" })) What is ".c2"? Am I supposed to search your html for something with that class and then look in your css to try to find that rule and then try to figure out what it is supposed to look like before, during and after it is done animating? You also mention a big green slab. Does it have a class or ID? Where is it in your html? Where are you controlling it with javascript? What css properties are being applied to it? See the dilemma? Its just way too much for us to try to dig into, and then there are hundreds of lines of css and js that are on your full site that aren't even related to the question. If you can't provide a clear and simple demo using an online editor like CodePen of JS Fiddle that clearly illustrates an issue you are having that is related to GSAP, I'm afraid I won't be able to help any further with this.
    1 point
  15. Carl test
    No problem. Happy to help. Very glad we could find a suitable solution for you. BTW I can confirm that when you change the duration() of a timeline it will also impact the delay. You could make valid arguments that it should or shouldn't do this, but at some point it made sense that it should. Just want you to know that its not a bug.
    1 point
  16. GreenSock test
    Ah, good catch. I think we'll just pull that whole thing (stale check) from the next version - it's so uncommon for there to be archaic versions of GSAP floating around out there anymore. For now, it's probably fine for you to just set stale = false. Sorry about the hassle.
    1 point
  17. pmascis test
    Hi Carl, Perfect, thank you! You were quite spot on about what was occuring despite me not giving you much info to work with. After watching that video it makes perfect sense, I didn't know about immediateRender and setting it to false in this scenario has worked. Thanks for all of your other efforts on this message board, I've learnt a tonne from your other posts. Cheers, Paul
    1 point
  18. PointC test
    Hi @dennisvg I wrote up a little info about AI exports for SVG that you may find useful. Happy tweening.
    1 point
  19. GreenSock test
    1) Nope, I don't see the double-transforms in the codepen demo. 2) That's a tricky one. SVG coordinates can be affected in many ways. For example, a <rect> element can be placed by simply using "x" and "y" attributes OR it could use the "transform" attribute OR it could use CSS transforms. And for a <circle>, it could use "cx" and "cy" attributes. I'm not sure exactly what Adobe Illustrator does under the hood in every scenario. I thought that most of the time it uses the "transform" attribute but actually I think there are various options when you export so that it might use attributes or it might use CSS values based on whatever you select. But yeah, it shouldn't really matter as long as you're using the latest version of GSAP. Glad you're enjoying the forums!
    1 point
  20. tomKnox test
    Hi PointC. Thanks for clearing that out. I am positive I won't forget this. Very much appreciated!
    1 point
  21. PointC test
    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
  22. GreenSock test
    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!
    1 point
  23. PointC test
    Looks like they're using canvas for that effect. @Sahil has a nice demo and tutorial about canvas mouse follow in this thread: You could make it happen with SVG too, but canvas would probably be a bit easier in this case. Good luck and happy tweening.
    1 point
  24. GreenSock test
    Sure. That site uses GSAP, but it's not as if there's a canned effect that you can apply like that - GSAP can animate any property of any object. So to achieve that effect, you'd need to wire up JS logic to get the behavior (like the mouse tracking, the way the letters kinda split into different colors overlaid on each other, etc.) and you could certainly use GSAP for any of the animations. Does that answer your question?
    1 point
  25. mikel test
    Hi @nathanlord, Here is the old praise about @Carl: Only as a suggestion. And: Another try lip sync Happy tweening ... Mikel
    1 point
  26. PointC test
    Hi @flubssen Welcome to the forum. You're targeting an array which contains all the .odd class elements. Since they are all part of the same target, they move together. You'll get the desired behavior by targeting like this: tl.staggerFrom(".odd", 0.5, {cycle:{x:[80,-80]}, autoAlpha:0, delay : 2}, 1.3); Happy tweening.
    1 point
  27. PointC test
    The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.
    1 point
  28. Rodrigo test
    Hi Gilbert and welcome to the GreenSock forums. First try to avoid string refs, they are deprecated since React 15.x. Use the ref callback instead: https://reactjs.org/docs/refs-and-the-dom.html In the constructor create an empty array to add the elements as you call the render title method: // this is inside the component's class constructor(){ super(); // just an empty array, we'll use the ref callback to add the DOM elements this.titles = []; // the rest of your constructor code here } Then, IMHO I don't see the need for two methods to render each title, you can run all your logic in just one and use the ref callback to add the element to the array, like that you'll have a predictable way to add your elements to the timeline. renderTitle(e) { const ATitle = titles[e.component]; return( <div className="box" key={e.component} ref={e => this.titles.push(e)} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } The key is the ref callback which has the DOM node as the argument, then the DOM node is added to the titles array. Then you can access the titles array and create your timeline: componentDidMount(){ const { tl, titles } = this; titles.forEach( (e,i) => { tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } This is a better and more actual approach to write your app. Now to the sequencing part of your app. I'm a bit puzzled, because react-titles does creates either a GSAP instance or uses react-motion for the animations. If you want to control those animations, you'll have to fork the repo and create an API that exposes some way to do what you need, because react-titles starts as soon as the component is mounted. For the initial position, what I saw in the repo is that the code uses fromTo instances, which create an immediate render, which sets the initial position of the elements being animated, so no matter what you do react-title will enforce those initial values passed in the props of the component's instance. Such is the nature of re-usable React components, you have to work with whatever the creator of the component is giving you. Also keep in mind that the open prop passed to the component is a boolean and you're passing a string "false". Try using a boolean instead: <ATitle size={e.size} text1={e.title} text2={e.subTitle} open={false} style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> Another option is hack into the code of react-titles and create a way to control the animations. Honestly if I was you, I'd take the animations being created by react-titles and bake my own solution for the particular needs of the project. The GSAP code in react-titles is good and there are no issues there and unfortunately we can't spend a lot of time figuring out how GSAP based tools work and how they're used. I saw that you started an issue in the repo, hopefully the creator(s) of the tool can help you more than I can and they can add a way to keep the tweens paused when mounting and give more control over them, as well as creating more complex sequences. Happy Tweening!!!
    1 point
×
×
  • Create New...