Popular Content

Showing most liked content since 09/12/2017 in all areas

  1. 7 points
    In that case, more people will be willing to help you if you provide your code. Just post new question and attach codepen with your current code so we can help you out or guide in right direction.
  2. 6 points
    So weird. I made a demo earlier that is nearly identical to that, but I didn't get around to posting it in time. It's just a modified version of something I made for another question.
  3. 5 points
    Hi @spartan89 I think this should work for you. If you'd like the quote to stay up longer, you can change the pause variable. If you don't want the next quote to overlap at all, you can set the overlap to 0. Hopefully that helps. Happy tweening.
  4. 5 points
    Hi @aderon14 I think that's fine, but I'm no expert. For that, I would highly recommend following Sarah Drasner. She does a bunch of workshops and presentations on GSAP and Vue/Nuxt. GitHub - a bunch of good stuff in here https://github.com/sdras?tab=repositories CodePen https://codepen.io/sdras/pens/public/ Twitter https://twitter.com/sarah_edo Slides http://slides.com/sdrasner
  5. 5 points
    Awesome answer, @PointC! Above and beyond as usual. Just for kicks, here's a slightly different version that shows how you can use a single delayedCall() instance and simply restart() it in the makeItMorph() method. And it uses slightly different logic for the incrementing/decrementing...
  6. 5 points
    Yep - both those things are possible. 1. Moving to a new x/y position: You could animate the path to a new x/y position on each morph. Those coordinates could be pulled out of an array and used in the morphing tween. Or you can have your target paths at different positions. Remember that you will not only be morphing to a new path shape, but also a new path position if the new one is someplace else. Here's a pen I made for another forum question, but shows that morphs will move to the new path position: You can see in one version the target paths are at the corners and they are all stacked on top of each other in the other version. 2. Autoplay the morphs: I think the easiest way to modify my first demo for an automatic play would be to modify the button click function so it's accessible via a delayedCall tween too. The delayed call will run the function every 5 seconds (it's a variable so change it to your liking) unless a button is clicked and interrupts it. Once the morph tween plays via a button click, it will once again call the function that starts the delay autoplay cycle again. Hopefully that makes sense and helps a bit. Happy tweening.
  7. 5 points
    Hi Patryk Is this what you needed? I used a from() tween at the beginning of the timeline to start the opacity at 0 and then fade out at the end. The position parameter is hard coded based on your 8 second tween, but you could certainly add labels for flexibility. I also reduced it down quite a bit by targeting the '#leaves groups' for the tween. That way you don't need all those separate timelines since the animation is the same for each leaf group. You could certainly use a stagger, cycle or a function based value for some randomness too. You had two values for yPercent (-450 and 50) in your tweens and I wasn't sure which was correct so I just left in the value of 50. Hopefully this helps. Happy tweening.
  8. 5 points
    Hello guys - I've finally finished an app I've been working on for some time, as while it doesn't showcase GSAP (which I've used in just about everything else I've ever done!) - I'd love to offer free pro accounts for any developers over here who might want to use it. I have about 33,000 Open Source & Creative Commons graphics, inside of an easy to use SVG editor that can output PNGS or SVGs, and will soon also have app icon exports for IOS and Android, as well as export for the Spine animation platform. We have a few thousand pieces of game art as well - including over 400 of the best Glitch pieces, as well as the Kenney.nl collection, and others. We are at https://kwippe.com The basic app is free but a pro subscription will get you access to importing your own stuff, as well as cloud syncing (coming soon) - and lots of other cool stuff on our roadmap. Sorry if this isn't the right place for this message - but wanted to throw it out there and see if anybody is interested! We are still definitely a beta product, but the app has a lot of promise as we are offering a variations designer that makes it pretty painless to throw together some quick graphics. Just shoot me an email - stace at kwippe.com - and I'll upgrade your account on Kwippe. @OSUblake @Carl @GreenSock
  9. 5 points
    Hi @Bernt Welcome to the forum. Here's a pen I made as an answer to another forum question that should help you get started: This is the original thread which has a similar question to yours: Hopefully that helps. Happy tweening and welcome aboard.
  10. 5 points
    Children don't tell their parents what to do... at least well behaved children don't. Think about elements. A child element cannot change the position of its parent, and it cannot stop its parent's position from changing. So you would need to do to do something like this. Not pretty, but when you see repetition, that usually means you can use a loop to simplify things. var master = new TimelineLite() .add(fadeIn(".d1")) .addPause() .add(fadeOut(".d1")) .add(fadeIn(".d2")) .addPause() .add(fadeOut(".d2")) .add(fadeIn(".d3")) .addPause() .add(fadeOut(".d3")) function fadeIn(el) { return new TimelineLite().from(el, 0.5, {xPercent:-50, autoAlpha:0}) } function fadeOut(el) { return new TimelineLite().to(el, 0.5, {xPercent:50, autoAlpha:0}, "+=0.2") }
  11. 5 points
    Hi @Bernt! Welcome to the forums! When you say you're new to coding in general, how much do you know? Can you add the buttons and have them trigger calls? To point you in the direction without writing the actual code, here's what you need to do: Create a timeline that loops (TimelineMax will do the trick super easily) Use a TimelineMax's .to() method for each of the shapes, each with a unique label attached to it (Check the position parameter in the docs). Add your buttons to call one of a variety of methods/techniques to jump to the desired label depending on the desired effect .seek() .play() .tweenTo() .progress() with .time(), .totalTime() and .getLableTime() I'm sure there are other ways as well, people here are pretty good at coming up with ideas how to achieve things. Happy tweening!
  12. 4 points
    Ok I'm excited to say the logic and views appear to work now - plus a login problem I didn't realize I had - and I've got the greensock coupon set to give 12 months of PRO subscription. I'll be putting some other coupons online but I don't think any others will be for that long, but I've had so much kindness here over the years! Thanks so much to @Carl, @OSUblake, @GreenSock, and others who have answered my questions, created Codepens I was able to drop into my projects, and so much more. So the coupon is greensockers The url to enter that into is https://www.kwippe.com/app.html#upgrade_beta I'll throw in a pic for good measure Let me know any problems you find! My "todo" list is huge right now of tweaks and features - plus we really need a good set of videos, tutorials, etc to help people see all they can do with the app. One day at a time I guess!
  13. 4 points
    Thanks for the demo with your question. Blake beat me to the punch with those pesky children trying to control their parents. Like Blake said, the paused state of a child animation does not affect the paused state of its parent. Pausing the parent will always pause the children. The position of the parent’s playhead dictates what is rendered in all child animations. This is a very purposeful design rule that dictates how the entire engine performs. Stepping back a bit, consider that GSAP has a root timeline that all animations belong to. When you create even a simple TweenLite tween it is added to this root timeline. var t = TweenLite.to("body", 1, {rotation:1}) console.log(t.timeline); // logs out a timeline It is very good that pausing t does not pause the root timeline thus making every animation pause. Of course Jack could write code that made it so that the root timeline doesn’t get paused in this case, but its good to have consistent behavior throughout. I can understand in your situation how you would like pausing the child to pause the parent, but I think in the grand scheme of things the current design makes the most sense in the most common use-cases. Imagine if pausing the parent did not make the children stop playing? you would have to identify every child tween and pause it (I know you’re not suggesting that). That probably doesn’t give the most clear or accurate explanation of why pausing the child doesn’t pause the parent, but hopefully you trust me that it works that way for good reason and maybe Jack can find the obvious thing I’m not remembering;) As for your demo, its an interesting scenario. The timeline that is created inside your function has no idea what timeline it is being put inside of after it gets created and returned so there is no great way to write code in there that says “pause my parent”. Your current solution of using call() to call a function that pauses the parent is probably the best thing there is but it isn’t entirely accurate as some minuscule amount of time will elapse while the function is being called and code is being executed. So the pause will not happen at the exact same time your call() happens. A few milliseconds of time drift probably won’t impact what you’re doing but figured I’d mention it anyway. This is the very reason we created a specific addPause() function so that it would ensure the timeline gets paused exactly when it should. Prior to addPause() folks were writing there own calls() to pause the timeline. For pausing the parent with call(), the only slight enhancement I can offer is dynamically finding the parent of the timeline that the call() is in like: console.clear(); function fadeInOut(el) { var tl = new TimelineLite({id:"child"}); tl.from(el, 0.5, {xPercent:-50, autoAlpha:0}) tl.call(pauseMyParent); tl.to(el, 0.5, {xPercent:50, autoAlpha:0}, '+=0.2'); return tl; } var master = new TimelineLite({id:"master"}) master.add(fadeInOut('.d1')) master.add(fadeInOut('.d2')) master.add(fadeInOut('.d3')) function pauseMyParent() { console.log(this.timeline.vars.id); console.log(this.timeline.timeline.vars.id) this.timeline.timeline.pause(); } $("#resume").click(function(){ master.resume(); }) https://codepen.io/hansel234/pen/vJjwWp?editors=1111 Maybe that helps a little. Don’t know. There will still be some slight time-drift.
  14. 4 points
    Great catch, Blake! There was a one-letter typo Should be fixed in the upcoming release. There's the same method on CSSPlugin as well, so here's an updated TweenMax with that: https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js The colorStringFilter() isn't generally intended for public use (which is why it's undocumented, but I exposed it on purpose as a static method just in case it came in handy down the road for someone and I could be like "just use this method..."), but it basically lets you pass in a 2-element array with a starting string and an ending string, and it'll search both of them for colors and harmonize their formatting (rgba() unless there's one that's hsl-based, in which case it'll switch to hsla()). That's useful for the core engine because the "animate any string" stuff taps into that. Otherwise, colors inside the strings like "red" or "#F00" or "#FF0000" wouldn't map to numbers that can be tweened. Make sense? If you're asking because you're working on the TypeScript definitions, I'm inclined to leave that colorStringFilter() undocumented. Feel free to push back if you think it's important to have in there.
  15. 4 points
    Funny my thing says I'm a newbie, I've been here and and off for a lotta years! Had sick kids today so didn't get the logic for the upgrades done - I'm going to do a custom code rather than run it through my ecommerce, as I think people much prefer not having to check out. So hoping to have a simple modal form with the code input up tomorrow.
  16. 4 points
    Hi @awagner I'm not sure what, but something is different on the first run, causing that flicker. It's really hard to tell what might be a performance problem as the animation runs too fast. Making a simplified demo of what you have might help so other people can play around with the code. CodePen is good, but even something designed for react, like codesandbox.io will work. Sometimes precomputing an animation can reduce some initial jank. No guarantees though. myAnimation.progress(1).progress(0); I also noticed some incorrect syntax here. TweenMax.to(splash, (0.6 * globalSpeed), {scale:80, opacity:1, transformOrigin: "50% 15%"}, Sine.easeIn); // Should be TweenMax.to(splash, (0.6 * globalSpeed), {scale:80, opacity:1, transformOrigin: "50% 15%", ease: Sine.easeIn}); Here's a post that might give you some ideas on doing a full-screen transition. For what you're doing, using another element or two might help with animating the transition. For some really advanced Bezier movement for transitions, this thread has a couple of examples.
  17. 4 points
  18. 4 points
    I'll upgrade any and all devs for FREE for a year from Greensock - I'm adding the logic for that today - if you login I'll see your email and I will upgrade you Hey @OSUblake ! I finished the demo - https://readvisually.org - but got sidetracked with this project, which is an offshoot of a much larger and more involved SVG editor that I was using to create ebooks for the read visually project! Hoping to get this one situated so I can go back to the read visually, as I am planning to use it to teach my daughter to read.
  19. 4 points
    Thanks for the demo. The short answer is no, there isn't an easy (practical) way to just remove the delay from a tween in a timeline when it is reversed. Yes, you could find the tween in the timeline, remove its delay and then shift the following tweens around, but then when you want to move forward again you would have to add the delay back in and move the tweens that follow. It can get messy. Once you say "i want this animation to something different in reverse" you step beyond what reverse is supposed to do. You need a different animation. My suggestion is to have separate functions for your open and close animations. When you call those functions you create the necessary timelines. This allows you to have much more flexibility Something like:
  20. 4 points
    Sounds like you're looking for a tutorial about the position parameter. Fortunately @Carl has a great one right here: https://greensock.com/position-parameter Happy tweening.
  21. 4 points
    If I understand the correctly, you can use a loop to create the animations for each element and place them in a timeline. Please see the demo below. Update the CSS to suit your specific needs:
  22. 4 points
    Ah, okay, I see what you're talking about. Yes, minimumMovement was designed for regular x/y drags (total pixel movement), not rotational dragging. However, I think it's a good idea to add that capability, so I'll do so in the upcoming release which you can preview at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js (uncompressed). That'll interpret minimumMovement as degrees when used with type:"rotation". That should make it very simple for you. In the mean time, if you want a solution with the current version, here's an example of using onPress and onDrag to limit dragging until a threshold of 45 degrees is reached: Does that help?
  23. 3 points
    Sorry about any confusion there, @Sahil, but we purposely didn't document the render() method because: There are VERY few cases where it'd be useful to the average developer. It could cause confusion because unlike progress()/time()/totalTime(), it doesn't alter the tween's startTime which means that on the very next "tick", it'll revert. For example, if a tween is at a time of 1, and then you render(2), it will immediately render as if it's at 2 seconds, but on the very next tick, it'll be at like 1.064 (or whatever, slightly later than 1). Some people may find that unintuitive even though it's the correct behavior. It is primarily intended for internal use. Was there something in particular you're trying to accomplish with render()? I bet we can provide a solution that uses a different method.
  24. 3 points
    @OSUblake has a nice boilerplate demo setup showing how to run JavaScript in response to media query updates: You should be able to do something similar and call Draggable's enable() and disable() functions for the appropriate sizes. https://greensock.com/docs/Utilities/Draggable/disable()
  25. 3 points
    What happened to the 'teach one to fish, don't give him the fish'? Yes I know @OSUblake's version of that will involve dynamite but at least I won't be looking so lazy by just giving him some directions rather than writing a whole application... You lot...
  26. 3 points
    Jesus you guys are amazing. I'm getting there, like I said I'm pretty new to all this. So just wrapping my head around what is happening in the JS codes is enough to get me confused. Got the autoplay and click on body (not on a button) to work. Now all I need to figure out is the X,Y position and controlling the size of the paths and I have exactly what I was aiming for. (edit, so I finally figured out that the X,Y position can be controlled when exporting the SVG from illustrator. So now it works... Still trying to figure out how to control the size of the shapes) Thanks so much for all the replies. Very impressed!
  27. 3 points
    Ah, ok. What I was thinking about will only work for a circle, so scratch that. I'll just rework your timeline. In the meantime, here's some info about creating cubic Beziers. Converting a rounded rectangle to cubic Beziers isn't too hard. For lines, you set the first control point at 1/3 the distance, the second control point at 2/3 the distance, and the anchors are of course at the ends. So if you had a horizontal line that was 30px long, the points would be at 0, 10, 20, and 30. For an arc, multiply this number by the radii to get the distances of the control points. var kappa = 0.551915024494;
  28. 3 points
    Hm, interesting. Okay, I implemented a change that should resolve that - would you mind trying it and verifying that it works well for you? The uncompressed pre-release of TweenMax is at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js
  29. 3 points
    ahhhh... passing the increment/decrement into the function and simply restarting the delayed call. Very slick Jack. That also avoids using kill() too. What can I say? It's Friday at the end of a long week and I needed to take out some aggression so I had to put a kill() in there. Thanks for the schooling.
  30. 3 points
    HI @iammarkmulvey Here's a similar question where @Jonathan has dropped some top-notch knowledge. Happy tweening.
  31. 3 points
    Hi @Melcarthus Welcome to the forum. If I understand your question correctly, you want them to do this? Does that help? Happy tweening.
  32. 3 points
    And here's an example of how to make a draggable picker / spinner.
  33. 3 points
    Hello Craig ! This was EXACTLY the case, thanks so much ! Swear I tried to solve it in similar way, had to mess something up, cus it wasn't working, then I got desperate and created that monstrous timeline combo ^_^' Happy tweening to you !
  34. 3 points
    Here's a modified version of that demo with the basic behavior you described. It uses the ModifiersPlugin. With that you can change values while they are animating. Very useful for doing things like wrapping values.
  35. 3 points
    Hi @elegantseagulls Sometimes it helps to look at the computed style to see how the browser formats it. So in Chrome, it has the color first.
  36. 3 points
    Hmmm... have you thought about maybe making it draggable? Using the ThrowPropsPlugin with Draggable, you could do something like how setting the alarm on a lot of phones work. That would allow you to easily flick the value to 500g of rice. Here's a draggable/throwProps demo you can play around with. Notice how you can drag the wheel and the page sections. The ThrowPropsPlugin is a Club GreenSock bonus plugin, so it's not free. I'm not trying to pressure you into becoming a member. This just seems like a perfect use case for it.
  37. 3 points
    Hey @mspanish just wanted to say well done! Your app showed up on my Twitter radar just recently with plenty of praise so, whatever you're doing, keep doing it. Like @OSUblake I'm not adverse to free stuff... I've also contributed to your 'likes' pool so you can get out of this 'Newbie' stigma
  38. 3 points
    Why do you need a headless browser? If you must use one, I wouldn't use onUpdate to do the screen captures. That's probably what's messing up your timing as animation performance is really bad in phantomjs. I would step through the progress of your animation just like @swampthang does in his code. This will ensure that every frame is evenly spaced out. var fps = 24; var duration = animation.duration(); var frames = Math.ceil(duration / 1 * fps); var current = 0; captureScreen(); function captureScreen() { animation.progress(current++ / frames); // capture the screen if (current <= frames) { captureScreen(); } }
  39. 3 points
    Hehe. Sometimes I get people asking if that's Oklahoma or Oregon, but it's Ohio. Or as it's officially known, The Ohio State University, like there are other ones. What browsers is it choppy in? Maybe we can summon our resident React expert @Rodrigo to take a look. I did notice that it doesn't seem to work correctly in Edge or Firefox for me on Windows. In Firefox, I noticed that depending on the scroll position, the ripple might not fill the entire screen, causing a snapping behavior. I wonder if that might be contributing to the choppiness you're seeing. If so, here's a demo that shows the math to calculate a full-screen ripple from a mouse click. It uses canvas, but the calculations should work the same for a div.
  40. 3 points
    If you use functions to create your animations, it's much easier to swap out and test different values, like an ease. var tl = createSomeTimeline(Power1.easeInOut); function createSomeTimeline(ease) { return new TimelineMax() .to(foo, 1, { x: 100, ease: ease }) .to(bar, 1, { x: 100, ease: ease }) .to(baz, 1, { x: 100, ease: ease }); }
  41. 3 points
    That's what I figured. We've all been down that road before. Sometimes using brute force is the only way to get something to look right when you can't make sense of something. Can you provide a demo of that? Transforms are usually faster as the browser can just move the graphic around instead redrawing it on every frame. But it's really hard to say why it might be slow without seeing it. Some older mobile devices just might not be able to handle the animation. SVGs are typically the slowest things to animate in a browser.
  42. 3 points
    Hi @SpriteLab Yeah, hard-light is close to what that Velorbis site is doing, although they are doing pixel manipulation for gamma correction. That's pretty slow to do unless you are using WebGL. Like I said, it all depends on what you're doing for how you should prepare your images. Generally, you want your images to be grayscaled with a lot of contrast. For anybody else looking to do tinting, here's a demo using regular canvas. If hard light-light is not selected, it will use multiply. The controller looks better using multiply, while the bike looks better using hard-light.
  43. 3 points
    @Carl Hey carl, thank you for your fast reply. This really helps me understand. This is exactly what i meant! @PointC Thank you for the reference, will take a deep look into it. Have almost watched almost all tutorials and i am making slow but steady progress. This really helps me out allot. You guys are awesome ! Greeting from the netherlands.
  44. 3 points
    Thanks for the demos. The trouble with those approaches is that the value of textArray[index] is only evaluated once when the timeline is first created. When the timeline repeats it does not try to get a new value. It has no idea you changed the value of index. It just uses the value you gave it when the timeline was created. The way I understand it, your best solution is to just loop through the array and add a set() and to() tween for each word to the timeline. The set() will change the text and the to() will fade it in and out. With all the animation code for each word in the timeline you will be able to play(), pause(), reverse() the timeline any time you want. var text = jQuery("h1"), textArray = ['hello', 'how are you', 'so long'] tl = new TimelineMax({repeat: -1}); textArray.forEach(function(element, index) { console.log(index, element) tl.set(text, {text:textArray[index]}) .to(text, 1, {opacity:1, repeat:1, yoyo:true, repeatDelay:0.5}) });
  45. 3 points
    Thanks for offering folks around here a free pro account, @mspanish. Very kind of you. And good luck with the product.
  46. 3 points
    The tween was also being created before the content was ready because you had the tween in the HTML panel while all the mustache related fun was down in the JS panel. You'll see that I moved the tween down there too and it all works fine. Happy tweening.
  47. 3 points
    The current API does not support WheelEvent directly, and I'm not sure how likely it is that it would be added any time soon. Perhaps if there is more demand. However, there should be plenty of hooks available so that you could wire it up yourself. You could probably even detect the velocity of the wheel spinning and pass that off to ThrowProps tween that smoothly animates the wheel based on that velocity. However, that isn't a road I can go down to far right now. Take a look at this demo that allows the horizontal scrolling of a div to control how far a draggable element spins. Since the div can be scrolled with the mouse wheel so can the draggable. I provide this demo just to show that if scrolling a div can control a draggable thing, you should be able to wire it up to anything.
  48. 3 points
    You can use a regular loop or something like jQuery's each() method. Here's a quick example: See how box1 is starting its repeat before box3 has finished its first play? Using the index of the element, you can set delays for each timeline. With each element now playing on its own timeline, you have a lot of control and can create seamless loops. Hopefully that makes sense. Happy tweening.
  49. 3 points
    GSAP is only animating the values. It doesn't do any of the rendering as that's all done by the browser. If this is happening in all browsers and all machines, there must be something else funky going on there. If you can recreate the issue in a demo, we can probably point you towards the culprit. Are you animating scale or font-size? You don't happen to have some leftover CSS animation also trying to animate those letters at the same time do you? I'm just throwing out guesses at this point. I wish I could be more help. Please let us know if you can recreate the problem in a demo. Thanks and happy tweening.
  50. 3 points
    You can just use jQuery for selection, GSAP works with it without any issues.