Carl last won the day on September 10

Carl had the most liked content!

Carl

Administrators
  • Content count

    8,900
  • Joined

  • Last visited

  • Days Won

    521

Carl last won the day on September 10

Carl had the most liked content!

Community Reputation

8,373 Superhero

About Carl

  • Rank
    Administrator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Carl

    How to create seamless loop of svg rect

    It looks like PointC provided an excellent solution. To take it further I would suggest you create a timeline for each “snake”. You can then give each timeline it’s own delay OR startTime in a parent timeline.
  2. 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.
  3. 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.
  4. 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
  5. Carl

    How to make elastic text scroll?

    Great job, Sahil. love the demos!
  6. 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.
  7. Carl

    draggable plugin - update children elements

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

    draggable plugin - update children elements

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

    Give me Suggestions to showcase PLIS

    Sahil, thanks for putting together that list. There are some real gems in there!
  10. 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.
  11. 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.
  12. 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.
  13. 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:
  14. 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.
  15. 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}) })