Carl last won the day on February 25

Carl had the most liked content!

Carl

Administrators
  • Content Count

    9,115
  • Joined

  • Last visited

  • Days Won

    531

Carl last won the day on February 25

Carl had the most liked content!

Community Reputation

8,940 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

    Vue + scrollTo integration

    Thanks for the demo. Looks like you just need to load ScrollToPlugin.min.js https://jsfiddle.net/bw1drmnq/
  2. Carl

    Smooth scroll for large image(i tried the tricks)

    Thanks for the demos. Its generally better to animate the x transform instead of left. Does this work better for you?
  3. Carl

    SVG to PNG with devicePixelRatio !== 1

    Its fine to have your question here. However, I don't have a solution for you. You might do better in stackoverflow or a forum related to canvas or more general development topics.
  4. Carl

    morphSVG

    Yup, as Dipscom said a demo would really help. My only guess is that #due is not a proper <path> element. At the very least please provide your svg code as there isn't much we can do with out that. Thanks!
  5. Carl

    Creating a different ending in an animation

    another option is to build your main timeline out of a series of tweenFromTo() tweens on your slide animations. In the example below you will see that the timelines (green, orange, grey) are only created once. They are never added to the master timeline. The master timeline is only adding tweens that literally scrub the playheads of those individual timelines. https://greensock.com/docs/TimelineMax/tweenFromTo
  6. Carl

    Slider with perspective cube turning on its head

    I spent a few minutes looking at your code and didn't get very far. The purpose of these forums is to help people with questions related to the GSAP API. As you can probably imagine, it takes quite a bit of time to look at 200 lines of code and figure out what its supposed to do... and even more time to try to figure out what isn't working. I've never looked at Jonathan's code before, and even though it is working great... it would take awhile to study. Since you have 90% of things working and the only problem is the rendering of that "cube", I would suggest you create a new pen and just create a very simple demo that has that cube built the way you want it and try to animate it with a timeline (without any human interaction). I think if you come back with just a cube and a few lines of timeline code to animate and there is still a problem, we will have a better chance to help you.
  7. Carl

    getChildren() on Timeline with stagger

    Rodrigo, excellent job teaching stagger school! —- this is is an interesting scenario. The child timeline in this case is a TimelineLite and getLabelsArray() is a method of TimelineMax. Not sure what the solution is other than using a loop instead of a stagger.
  8. Carl

    Need help to animate a analog clock

    I don't have anything with a clock, but the code below shows something animating from left to right. Hopefully it will give you some ideas about how to move your clock.
  9. Carl

    Animation gets slugish over time

    Hi and welcome to the GreenSock forums, Thanks for the demo. That's quite a bit of code to go through. I think the biggest issue is that you are asking the browser to do a ton of work on each mousemove and mousemove fires at a super fast rate. Please add a log to one of your mousemove functions like function moveCircle(e) { console.log("move") TweenLite.to($circle, 0.7, { css: { left: e.pageX - $(".tween-container").offset().left, top: e.pageY - $(".tween-container").offset().top }, z: 0.1 }); Open the browser console and move the cursor around the element. You could see "move" log out a hundred times moving just a tiny distance in a short amount of time. On each move you creating a bunch of tweens on a bunch of svg elements and then instantly killing all those tweens and creating new ones on the next move. Please read this article on throttling and debouncing to learn how to limit how often you create new tweens: https://css-tricks.com/the-difference-between-throttling-and-debouncing/ Although not the biggest problem, you will get better performance using transform values like x and y instead of top and left when moving divs -- I did notice that certain nodes do get sluggish independently and do kind of stay that way. I don't have an explanation for that.
  10. Carl

    CSSRulePlugin not longer works

    Chrome and Safari are working but every time triggers the error, by another hand Safari just doesn't work at all. that's a bit confusing. I'm guessing one of those should be FireFox. I see it working fine in Chrome and FireFox, but it does not work in Safari. I'm sure @GreenSock will investigate further and let you know of any possible solutions / workarounds. Thanks for reporting the issue.
  11. Carl

    CSSRulePlugin not longer works

    yeah, that codepen demo works fine for me too.
  12. Carl

    CSSRulePlugin not longer works

    Can you please supply the link to the CodePen that isn't working? Thanks!
  13. Carl

    Draggable.create(...).disable is not a function

    Hi and welcome to the GreenSock forums. Thanks for the demo. Draggable.create() returns an array of Draggables. You can only call disable() on a single instance of a Draggable. https://greensock.com/docs/Utilities/Draggable/static.create() To call disable() on the first element you could do: rotationDrag[0].disable();
  14. The problem is that you can only call staggerTo() on a TimelineLite that you have instantiated var tl = new TimelineLite(); tl.staggerTo('things', 1, {x:200}, 0.2); There's nothing in your code that explains why TimelineLite isn't loading. Please be sure to follow the methods described in the NPM usage guide: https://greensock.com/docs/NPMUsage
  15. Carl

    New user, looking for help on translating images

    Your code at line 307 is incorrect .fromTo('.featImg', 1, {x: "-80%", ease: Power4.easeOut}, "-=1.9") You are using a fromTo but you need from AND to values, something like: .fromTo('.featImg', 1, {x:"-20%"}, {x: "-80%", ease: Power4.easeOut}, "-=1.9") Looking through your code it appears you are defining an ease in both the from and to vars. You only need it once, in the to vars. Also there are some awkward position parameters .to( ".slide" , 1 ,{ width: '100%', height: '100vh', padding: '40px', ease: myEase }, "-+1"); // should be "+=1" or "-=1" In the future, please provide a reduced test case. It will make things much easier for us and you to isolate the problems. thanks