Carl last won the day on September 10

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,899
  • Joined

  • Last visited

  • Days Won

    521

Everything posted by Carl

  1. Carl

    Again: Playing a (staggered) timeline reverse

    I was actually considering hyperlinking VHS and VCR but figured those kids would just ask Siri or Alexa.
  2. Hi and welcome to the GreenSock forums, The easiest way to get something to follow a polyline would be to use MorphSVG to convert your path data from your polyline to an array of points and then pass those points to the BezierPlugin as explained here: https://greensock.com/path-animation I made a demo showing how that would work var path = MorphSVGPlugin.pathDataToBezier("#route", {align:"#tile"}); console.log(path); TweenMax.set("#tile", {xPercent:-50, yPercent:-50});// center tile on path TweenMax.to("#tile", 8, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone}) If you want to use MorphSVG you can upgrade your membership to a Shockingly Green via your account dashboard /// If you want to manually translate the coordinates of your #tile so that you can animate to coordinates on your line please read this post (especially blake's final demo) You'll see that each chicken animates from the center of the box.
  3. Carl

    Again: Playing a (staggered) timeline reverse

    Thanks for the demo. I don't know much about vue so I can't address anything related to how things are set up, but I managed to find the issue. Each time you are calling this.$refs.Logo.animateLogo() you are creating and returning a new timeline. Calling reverse() on a newly created timeline only changes the direction of the playhead (reversing it). Your newly created timeline has its playhead at a progress of 0 (the beginning), so reversing it doesn't really do anything that you can see. Imagine going back in time a few years and opening up a fresh new VHS tape. If you put the VHS tape in the VCR and pushed the rewind button what would happen? nothing. You would need to play forward in order for it to rewind. Same thing applies to what you are doing. In your code you are doing this methods: { play() { console.log("Clicked play") this.$refs.Logo.animateLogo() }, reverse() { console.log("Clicked reverse") this.$refs.Logo.animateLogo().reverse() // not good } } but you can advance the playhead to the end before reversing by doing this methods: { play() { console.log("Clicked play") this.$refs.Logo.animateLogo() }, reverse() { console.log("Clicked reverse") this.$refs.Logo.animateLogo().progress(1).reverse() //better } } demo here: https://codesandbox.io/s/lrzp0p817q
  4. Carl

    How to make elastic text scroll?

    Great job, Sahil. love the demos!
  5. Carl

    Having trouble understanding TimelineMax

    Thanks for the demo. Its very helpful. Since you are new to the platform this is a great challenge to try to tackle as a beginner, however it appears you are trying to do some optimizations (like creating loops) before really understanding how things work. There are a few errors and things I don't understand that are probably just due to experimenting and lack of experience (which is TOTALLY fine) and I don't want to spend a lot of time picking it apart but some things to note: you shouldn't be assigning multiple tweens to the same tween variable (var tween = TweenMax.to()) you can't put repeats on TweenLite tweens, only TweenMax tweens instead of using animation.add() you should use animation.to() to save a lot of typing (see my example below) Most importantly, when working with timelines its crucial to understand the position parameter. You should be using it instead of delays on each tween in your timeline. Please study this page: https://greensock.com/position-parameter - Once you understand that page you will be well on your way to becoming a timeline master. In cases like this I would strongly suggest working with a very very reduced example (as little HTML and CSS as possible) and writing the code long-form (no loops) so that you get the basic effect you want working correctly, with the right timing BEFORE you try to refactor it and make it shorter. Please take a look at my example. It may not be exactly what you want, but should be a good starting point. Once you get the text hiding and revealing they way you want, then you can try to work with a more complex svg, additional elements and different effects for the wipe.
  6. Carl

    draggable plugin - update children elements

    I thought I felt a bit strange when I woke up this morning
  7. Carl

    draggable plugin - update children elements

    @OSUblake has a clever approach to this type of effect
  8. Carl

    Give me Suggestions to showcase PLIS

    Sahil, thanks for putting together that list. There are some real gems in there!
  9. Carl

    MISSING: Can't find Draggable flask example

    wow, glad to hear that is the right one. Now I am noticing the little pointer wiggling based on velocity. very cool.
  10. Carl

    MISSING: Can't find Draggable flask example

    hmm, this smells of something @chrisgannon would conjure. This comes close to your description but I think it misses the mark with the rotation: I'd suggest cruising through his pens: https://codepen.io/chrisgannon/pens/public/ Hit next about 100 times. Even if you don't find it (if its not his), you'll be amazed at what you see.
  11. Carl

    Give me Suggestions to showcase PLIS

    I usually find more than enough pillaging the CodePen profiles of Blake, Craig and Chris Gannon. Here is a presentation I did a while ago: http://slides.com/greensock/pch#/ Feel free to rip anything you want out of it. Awesome to hear that you are doing this presentation. I'm sure you'll do great.
  12. Carl

    3d text slider efffect

    I don't think I will be able to program this to your exact specifications, but one approach is to create a function that randomly scales each word. When that animation is done, it uses an onComplete callback to call that function again and create a new random animation:
  13. Carl

    Bubble Animation

    Sorry, but we just don't have the resources to guide you one-on-one through building these types of things. However, as a fun little challenge, I'd encourage you to start here: Step 1: watch the Getting Started video here: https://greensock.com/get-started-js Step 2: Create an html page that contains an SVG that has a single <circle> in it Step 3: Try to move the <circle> to the right using TweenMax The CodePen demo below loads up every GSAP tool (including the bonus plugins) so you can just drop in your SVG code in the HTML tab and write some JavaScript in the JS tab. After clicking "Run Pen" you can click the "Edit on CodePen" button. If you get stuck on any of the above, let us know, we'll be happy to help. Once you get a single circle moving you can experiment with more circles, adding mouse events, etc.
  14. Carl

    Alternatives to Mouse Out

    Hi and welcome to the GreenSock forums, If I understand correctly you can make the element return to its normal size without using a Timeline or a mouseout. A single TweenMax tween can repeat and go back to where it started. I used a separate yoyoEase for the return animation. I am also using a repeatDelay so you can see where the forward animation ends and the repeat (yoyo) begins. You can remove the delay and yoyoEase if you like $(".red").mouseover(function(element){ TweenMax.to(this, 1, {scale:1.5, ease:Elastic.easeOut, yoyoEase:Power2.easeOut, repeat:1, repeatDelay:0.2}) })
  15. Carl

    3d text slider efffect

    Hi and welcome to the GreenSock forums, Thanks for providing the demo. I'm not understanding what you need in addition to what you already have working in your demo. Are you trying to add different effects or have it do something else?
  16. Carl

    SVG translate elements from svg coordinates

    @mikel in keeping with the license agreement, please be sure that GSAP is only used in the ethical cloning of 100% organic chickens.
  17. Carl

    Bubble Animation

    Hi and welcome to the GreenSock forums, Yes, the site you mentioned is using the GreenSock Animation Platform. Unfortunately it would be extremely time-consuming to try to explain how all of that works, especially not knowing just how new you are to web development. There are probably a dozen or so different things going on there, each with their own varying levels of complexity. Honestly, this is a very ambitious project for a beginner. There really aren't any shortcuts to these types of things (unless you find a tutorial or demo online that provides all the code for you). Perhaps someone around here knows of a tutorial or demo that does something similar. The only thing I thought of was @Sahil's canvas tutorial that makes a bunch of elements scale and move based on their proximity to the mouse: Regardless of how closely that resembles what you need to do, it paints a nice picture of the level of complexity. If you have any specific questions about the GreenSock Animation Platform, we'll be happy to help.
  18. Carl

    SVG translate elements from svg coordinates

    The trick here is that all those SVG child elements like <g> and <rect> have x and y of 0,0. Please see this thread here in which @OSUblake explains getBBox() and provides a helper function that takes into account transforms. Its probably a bit more than you need for this, but its a great utility to have around. I used his getBBox() function to figure out the distance between the x and y of each chicken and the box using a function-based value for each chicken in a single tween. var tl = new TimelineLite(); var rectBox = getBBox(document.getElementById("box")) tl.from(".chicken", 1, { x:function(index, element){ var chickenBox = getBBox(element, true); return rectBox.x - chickenBox.x }, y:function(index, element){ var chickenBox = getBBox(element, true); console.log(chickenBox); return rectBox.y - chickenBox.y } });
  19. Carl

    Animate to width of not yet visible text

    The general idea would be to build a timeline. Here is a starting point for you You may need to tweak it a bit.
  20. Carl

    Animating border using :after and :before

    Yes, GSAP can tween the pseudo elements :before and :after using the CSSRulePlugin https://greensock.com/CSSRulePlugin
  21. Carl

    typeit and gsap

    Sorry, I'm not familiar at all with typeit. Please try their support channels. We have to keep our support focused on the GSAP API. Thanks!
  22. Carl

    SteppedEase to animate sprite with columns and rows

    For a grid you will most likely have to loop through each row and create a new SteppedEase tween and increment the y value OR just use a set() to put the background where you need it. Here is one we had laying around: and another from sesamechee
  23. Carl

    Tween Max differences AS3 to JS

    Just to clarify some things based on the original question. The GSAP API syntax for AS3 and JavaScript is nearly identical for all the core tools from simple TweenLite tweens to more complex TimelineMax sequences. However, when using HTML5 canvas in Animate you need to use the Easel.js canvas library and not AS3. Easel.js is very closely tied to AS3 in that it offers an API for DisplayObjects (like MovieClips) a familiar drawing API, similar mouse events and more. Check out the docs here: https://www.createjs.com/docs/easeljs/modules/EaselJS.html The JavaScript version of GSAP plays very nicely with Easel. Its worth noting though that the AS3 GreenSock tools such as LinePath2D and other "path follower" tools do not exist in the JS version of GSAP. Replicating what Blake has already done for you with SVG is not going to be a simple task if you need to only use Animate and the html5 canvas tools available.
  24. Carl

    drawSVG bug?

    Yup, Sahil is exactly right. In case you need more help understanding immediateRender check out this video Also, a little tip for using CodePen. You shouldn't have to change a log() or any code to get your demo to run. You can enable a "run" button via the pen's settings as shown here: Your pen with "run" button enabled Hope that helps
  25. Carl

    Understanding Codepen

    Definitely take the CodePen editor tour and watch the video here https://blog.codepen.io/2016/02/01/learn-how-the-editor-works-the-editor-tour/ That should explain about 90% of what you need for making simple demos with CodePen. Also, their documentation is great if you need to learn more about a specific task: https://blog.codepen.io/documentation/ --- From your demo, my guess is that it is a bit incomplete as you don't have anything in the HTML tab and I'm not sure where the draw() function is supposed to be drawing the shapes you are using. Also not sure if the final output is SVG, canvas or if you need be loading an external library. We really need to keep our support focused on the GSAP / GreenSock API. If you need help with GSAP, we're here to help.