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

Everything posted by Carl

  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. Came across some cool HTML5 banner ads while doing some casual browsing and figured I share them: Verizon Fios (GSAP): https://s0.2mdn.net/3950987/1441292307159/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600/acq_fios_3X_MZ2BBSEduPromoNYV2_7999_0_HTML5_8142015_300x600.html Jeep (GSAP + EaselJS): http://s0.2mdn.net/ads/richmedia/studio/pv2/38170525/20150831144144032/ Muppets (GSAP): https://s0.2mdn.net/4139733/1440792288892/300x600_MPT_Muppets_LightRB_HTML5_Sept22.html Google Music (GSAP + SVG) https://s1.2mdn.net/ads/richmedia/studio/pv2/37557754/20150731072517615/ Do you have any HTML5 GSAP ads to share? We would love to see them
  9. 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.
  10. Alright Guys, I have a little challenge / question for you. I really want to be able to get SVG path d attribute data into a format that BezierPlugin can use. So given this string M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93, I'd want either an array of all the x/y values of all the anchor and control points like [0,0,0,0,14,184,157,184,157,184,157,86,157,86,157,86,330,86,330,86,330,86,435,83,435,179] or an array of point objects (which ultimately would get passed to BezierPlugin) [{x:0, y:0},{x:0, y:0},{x:14, y:184},{x:157, y:184},{x:157, y:184},{x:157, y:86},{x:157, y:86},{x:157, y:86},{x:330, y:86},{x:330, y:86},{x:330, y:86},{x:435, y:83},{x:435, y:179}] The end goal is draw a continuous path in Illustrator, smack svg output into an html page, use the svg path for a Bezier tween. This video explains all this in glorious detail: Does raphael, or snapSVG or any other library offer a convenient conversion method? It seems that since the same curves can be represented each way it should be easy to convert 1 format to the other, right? I'm not looking to have a robust tool built that analyzes svgs and builds animations automatically, just a function that I can do convertPath(dPath) { ... //turn dPath string into an Array of anchor and control points return BezierPointData } //usage var bezierAnchorAndControlPoints = convertPath("M0,0c0,0,14,184,157,184V86h173c0,0,105-3,105,93"); Any help is greatly appreciated. Carl p.s: This mission was greatly inspired by Chris Gannon's DrawScript converter: http://gannon.tv/drawscript-to-gsap/ and I'd like to publicly thank Rodrigo for helping me get a good leap into Raphael.
  11. 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.
  12. 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.
  13. Carl

    CSSRulePlugin not longer works

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

    CSSRulePlugin not longer works

    Can you please supply the link to the CodePen that isn't working? Thanks!
  15. 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();
  16. 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
  17. 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
  18. Carl

    Origin and findMorphOrigin doesn't work

    If you check your console, you'll see a message saying that Draggable must be loaded. FWIW morph origin isn't really going to help much when you multiple path segments like that.
  19. We love answering GSAP-related questions, but in order to get you a fast, accurate answer, it is very important that you provide code we can test. Your problem may be related to CSS, HTML, or JavaScript (or a mixture of those). If you only provide a tiny code snippet (outside of its context), it's difficult to diagnose. And it's just not practical to read large chunks of code in a forum post. We need code that we can dig into and play with...quickly. We are big fans of CodePen.io, an online editor that allows you to create (and share) demos that are easy to inspect and edit. They make isolating issues much faster. Watch How it is Done: GreenSock Bonus Starter Pen To create a demo with all of the tools in TweenMax and every bonus plugin: Click Run Pen in the demo above Click the Edit on CodePen button Click the Fork button to create your own copy. Add the minimal amount of HTML, CSS and Javascript necessary to replicate your issue. Save the pen Paste the URL of your pen (demo) into a new forum topic with a short description of the problem. Include OS, browser and device information where applicable. CodePen is completely free to use and you don't even have to sign up or log in. We do recommend creating a free account as it will allow you to save and organize your pens and much more. The special "trial versions" of the bonus plugins also work on the following domains: codesandbox.io stackblitz.com jsfiddle.net Use the pen below to easily copy and paste the urls to the bonus plugins: Thanks for your cooperation. We look forward to helping you.
  20. the demo below shows how you can create elements and add them to an existing animation that is running. Once the demo loads, hit the button a bunch to create elements. Their animations will be inserted at the timeline's current time()
  21. Carl

    Timeline freeze page on load for 5 seconds

    Thanks for the link. Very helpful. The issue is not at all related to the fact that you are loading TimelineLite on a page. The problem has to do with the fact that you are animating 4734 lines in an SVG and DrawSVG has to measure every single line and manipulate its stroke-dashoffset. I suspect the added time has more to do with the browser's reading and writing of values and not so much DrawSVG's computational time. Regardless, I would suggest you try a test with a much simpler svg just to make sure this is exactly where the problem is.
  22. Yes. I didn’t fix it. Just want you to see that you have to deal with those extra hover events somehow or reset the menu using a different event - like the opening of the menu.
  23. Thanks for the demo. In the future, please provide some instructions like "press the menu button in the top right to open the menu". The key issue can be exposed by adding one console.log() to your hover function menuLinkHover() { console.log("hover" + $(this).text()); tl.reversed() ? tl.play() : tl.reverse(); } https://codepen.io/GreenSock/project/editor/ZWGkoV when you click on the "menu" button and click on "About" you will see hover gets logged 3 times. 2 of those times AFTER the click. I put some code in a separate click handler as @GreenSock suggested (and was a great idea), but that won't work because 2 hovers get fired AFTER the click which undo anything that was done in the click function. I think your easiest route forward is to just reset each timeline back to progress(0) whenever the menu is re-opened.
  24. Carl

    Timeline freeze page on load for 5 seconds

    Very hard to tell without seeing this. Only under the rarest of circumstances where perhaps 10s of thousands of tweens are initiating at once would I suspect even a few milliseconds of interruption. 5 seconds is an incredibly long amount of time and I can't imagine how loading TimelineLite would cause that type of impact. I'm curious where you are loading TimelineLite from and why you are choosing to load it separately instead of just loading TweenMax. Are you loading GSAP files from a cdn or your own server? Again, without a demo or link to your site its impossible to know for sure and it will take way too long to try to guess.
  25. Carl

    Small scaling font blurry

    Hi and welcome to the GreenSock forums, Thanks for the demo. Its a bit confusing as the thing that says "click me please" doesn't have a click event attached to it. For other people testing this: You have to click on the red thing that says scale. Regardless, this seems to purely be a browser rendering issue. If you just use css to set the scale like transform: scaleX(1.03) scaleY(1.03); You get the exact same results. There really is nothing GSAP can do about that. There are only so many pixels available for anti-aliasing (smoothing) and scaling to 3 hundreths is such an insignificant amount of change that its kind of understandable that fidelity could be lost. Perhaps someone else has some ideas for getting it crisper. Its not really my area of expertise.