OSUblake last won the day on October 12

OSUblake had the most liked content!

OSUblake

Moderators
  • Content count

    2,758
  • Joined

  • Last visited

  • Days Won

    280

OSUblake last won the day on October 12

OSUblake had the most liked content!

Community Reputation

5,249 Superhero

About OSUblake

  • Rank
    Moderator

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

12,873 profile views
  1. Using scope -solved

    What are you talking about? You can't the scope of a bound function.
  2. Move then tween on a path???

    Yep. That's what I'm talking about. It looks like the straight line animation is overshooting where the arcs start a tad. Your animation is a little different, but I usually set whatever I'm animating to the start position of a motion path to prevent it from jumping. var values = MorphSVGPlugin.pathDataToBezier("#somePath"); TweenLite.set(myElement, { x: values[0].x, y: values[0].y }); Left and top may appear to do the same thing as x and y, but they are totally different. The net movement from this tween will be 200. TweenLite.to(myElement, 1, { left: 100, x: 100 }); left and top will move an element to a new position, causing the browser to recalculate the layout. x and y are transforms, and just translate the pixels to a new position. Transforms do not affect anything and are usually hardware accelerated for better performance. Here's a good article that goes into detail about that. https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ Check out the difference in movement in this video. And here's a good article about doing percentage based translation with GSAP using the xPercent/yPercent properties. https://greensock.com/gsap-1-13-1
  3. Draggable Rotation Clockwise Only

    Now it will work in other browsers.
  4. Draggable Rotation Clockwise Only

    FAIL! I didn't check the second demo in other browsers... brb.
  5. Draggable Rotation Clockwise Only

    Hi @pattysheppard Here's a couple variations using a liveSnap function to limit rotation. The first one has one drawback which you may or may not want. If you rotate counter-clockwise, like say 3 times, you'll have to rotate clockwise 3 times before it starts rotating again. The second one keeps track of the change in rotation to eliminate that drawback.
  6. How to use GSAP with Vue/Webpack (vue-cli + webpack template)

    Yeah, I couldn't figure it out. It has something to do with hot reloading, which is a pretty complicated concept.
  7. How to use GSAP with Vue/Webpack (vue-cli + webpack template)

    @GreenSock What would cause a plugin to remain on _gsQueue? @Kevin Abatan I got a chance to look into your issue. It seems that the problem is that when you import a GSAP plugin from a regular folder, at least in the components folder, it's expecting it to be written as an ES module with an export default. GSAP plugins currently don't use ES modules which is causing the problem. I'm no expert in using the vue-cli or Hot Module Replacement (HMR), so there might be some setting or plugin to get around that. If anybody reading this knows, please do share! In the meantime, here's how you can work around that. Copy your plugins into the node_modules > gsap folder. Once you do that, you should be able to import the MorphSVGPlugin like this. import { TimelineMax } from 'gsap' import MorphSVGPlugin from 'gsap/MorphSVGPlugin' Let us know if that fixes the issue.
  8. Using scope -solved

    In short, scope is the object that "this" refers to in a function. By default, the scope of a callback in a tween/timeline is the tween/timeline itself. With jQuery, most methods have the scope set to the element, which is what "this" refers to in the function. $("button").click(function() { TweenLite.to(this, 1, { color: "red" }); }); See if you can make sense of the scope here.
  9. Using scope -solved

    I did notice that the goToSlide function does use "this" inside it. TweenLite.to($slidesContainer, 1, { scrollTo: { y: pageHeight * $currentSlide.index() }, onComplete: onSlideChangeEnd, onCompleteScope: this // <= this??? }); But that's probably redundant because the function it's calling, onSlideChangeEnd, doesn't use "this".
  10. Using scope -solved

    Hi @mikel You only need to worry about scope if the function uses "this" inside it. What you want is to pass a parameter to the function like this. TweenMax.to(action,1,{scale:0.2, onComplete:goToSlide, onCompleteParams: [$currentSlide.next()] })
  11. Move then tween on a path???

    I did notice a slight jump at the very beginning. Not sure what's causing it. Your other animations would be smoother if you used x and y instead of left and top. Not sure about ignoring lines of code, but it's a good idea to make sure your images are loaded before trying to animate them as the layout might change. It's also a good idea to put all your scripts and code at the bottom of your page instead of the top. Just right before the closing </body> tag.
  12. How to use GSAP with Vue/Webpack (vue-cli + webpack template)

    Yep. I'll look at it in a bit.
  13. How to use GSAP with Vue/Webpack (vue-cli + webpack template)

    Hi @Kevin Abatan Your syntax looks fine, so I don't know what the issue is. Can you send me what you have so I can take a look? You can send me a PM if you don't want to post it publicly.
  14. Fluid zoom between images

    Sounds like a good idea. Using an ease drastically reduces the number of animations needed to make it work. Maybe @PointC can share some other use cases for an exponential scale ease as it's a new one for me? I want to try to some other things with it, but here's my version using the ease.
  15. Move then tween on a path???

    Hi @SLSCoder You can always go back to the original demo I made. It doesn't use SVG... at all. I'm manually offsetting the Bezier points, and I add 2 additional horizontal Bezier segments to the points in order to position the words off screen. That's the complicated part, which is why I was trying to steer you to use SVG.