Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Shaun Gorneau last won the day on March 3 2019

Shaun Gorneau had the most liked content!

Shaun Gorneau

  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Shaun Gorneau

  1. To get the circle to stay with the cursor when scrolling, try using the 'mousewheel' event in combo with a TweenLite.set() to keep the circle on (or close to) the cursor while scrolling.
  2. Hi @David Spector, With all due respect, "I don't have time to figure it all out" is going to limit any type of help this forum has to offer as doing any of this requires a willingness to put time into learning. The original question had very little to go on, so I do apologize that my example seemed too complex. The bulk of the SVG are the grid lines in that background that are not relevant to the help being given ... perhaps I should have stripped them out to make for a more clear example. The relevant part of the example is actually pretty small tl .set( '#arrowhead', {autoAlpha: 0} ) .fromTo('#grey-line polyline', .75, {drawSVG: '0'}, {drawSVG: '100%', ease: Power0.easeNone} ) .fromTo('#drift-logo', .25, {x: 30, autoAlpha: 0}, {x: 0, autoAlpha: 1, ease: Power0.easeNone} , "-=.1") .fromTo('#purple-line polyline', 2, {drawSVG: '0'}, {drawSVG: '100%', ease: Power1.easeOut}, "startPurple" ) .set( '#arrowhead', {autoAlpha: 1}, "-=2" ) .to('#arrowhead', 2, {bezier:{values:arrowPath, type:"cubic", autoRotate: 45}, ease: Power1.easeOut }, "-=2" ); With only a few SVG elements being tweened, '#arrowhead' '#grey-line polyline' '#drift-logo' '#purple-line polyline' I hope this is more helpful.
  3. @David Spector, To get those paths you only need to export/save-as your Inkscape file as an SVG file. The resulting file will have the SVG elements that are accessible to CSS and Javascript. Example, here is an SVG I created and animated for someone in Reddit that had GIF illustating what they wanted to achieve with SVG and Javascript. While this Pen is not tweening a logo or logo components, it is tweening SVG elements just as a logo would be SVG elements (polyline, polygon, ellipse, path). It's also making use of the DrawSVG plugin to "draw" the line being graphed ... but those lines can be tweened in the ways that you are noting (x, y, autoAlpha, rotation, etc.) Hope this helps.
  4. No problem doing timelines have a look at this CodePen.
  5. Hi @Ziafat Ali! The problem is that one tween goes from autoAlpha 0 -> 1 ... while the next tween translates the x position from 0% to 100%. So the next time the tween for autoAlpha 0 -> 1 fires, it's doing it ... but "off screen". Have a look at this CodePen .. I use TweenLite.set() to reestablish the "home" position. Also .. I'm using simple Tweens vs a Timeline for easier control. Lastly, because you using % for the x property value, better to use 'xPercent'. Hope this helps!
  6. Also seeing the PixiJS Pen at 60fps here in Chrome 72.0.3626.81 ... on an ancient MacBook Air (MacBookAir6,2)
  7. Hi @David Spector, What animation are you referencing here? Smooth animations are mainly achieved by tweening properties that are hardware accelerated (like` x` and `y` instead of `top` and `left`, for example). You can create line, rect, and circle either server-side or with Javascript dynamically. There are libraries to help deal with that like SVG.js https://svgjs.com I don't use any such tools ... but Adobe Animate might be something to look at. https://greensock.com/GSAP-Animate-CC-2017 Hope this helps, Shaun
  8. Hi @marc1311, Before I tell you why .. I want to say, "Don't worry ... we've all done this at some time." Your id selector is missing "#". This tl.from("spotify", 1, {autoAlpha: 0, x:-20, ease:Bounce.easeOut}); Should be tl.from("#spotify", 1, {autoAlpha: 0, x:-20, ease:Bounce.easeOut}); I've also cleaned up your CodePen a bit. Javascript libraries should be called in with CodePen's Javascript settings and the HTML portion should only be what is *within* the <body> Hope this helps!
  9. Good catch on the incomplete closing </div> ... that's what I get for typing too fast play(), pause(), currentTime() are native to JS in the video and audio APIs, so there's not much any framework can/would do to make that easier. I went with jQuery only to make the bindings a bit easier ... but vanilla JS would work just as well. Is there something beyond play/pause that you're hoping GSAP would facilitate?
  10. Hi @EmGes, Yes, this is absolutely possible, but this doesn't have anything to do with GSAP. It's pretty straight forward (especially if using jQuery). Here is a CodePen showing a way to do it ... Are looking to do anything with GSAP that you have questions about?
  11. Yup, that's it! I'm a bit a progressive enhancement nut, so I opt for minimal HTML. So basically, if an element's purpose is to be manipulated by Javascript (for either presentation or interaction), then it must (for me) be created by Javascript.
  12. What I mean is you can use Javascript itself (in this case jQuery, since you're already using it) to duplicate the bluebox for presentational purposes, but leave it out of the markup. But because they are Tweening at the same time ... they will need to be seen (tweened) as distinct elements.
  13. @wcomp If what is shown in your CodePen is (visually) the desired outcome, then you need two elements to animate. But that doesn't mean you need two distinct elements in your markup (not sure if that's what you're asking though). If the timing can be such that the lower instance doesn't come into view until the top instance is out of view, then you can do it with one.
  14. Oh no!! I didn't see you in here ... sorry @Dipscom!
  15. Hi @DanielHoff, Hopefully I'm not misunderstanding ... but you can use a pretty straightforward selector natively in GSAP to target these. Here is a CodePen Hope this helps!
  16. Hi @gbrl, you were pretty close! For these types of one-on-one interactions, it's often easier just to build a tween to respond rather than build out a timeline. Here is a CodePen showing what I mean. Also, animating top (and/or left) is perfectly fine, but performance is better if you animate the x/y properties since these use CSS translate. Hope this helps!
  17. @dadamssg Welcome to GSAP! A quick outline and regrouping/layering of elements is all it takes to make the rays disappear behind the sun rather than overlaying the sun.
  18. 100% working here in Safari 12.0 on MacOS 10.14 ?
  19. Hi @Aitor and welcome to GSAP! The values to pass to the callbacks should be functions. Hope this helps! Shaun
  20. If I'm not mistaken ... you can't animate a dashed line because that is the very mechanism DrawSVG uses to simulate the drawing of a line ... drawSVG Docs: It does this by controlling the stroke-dashoffsetand stroke-dasharray CSS properties. https://greensock.com/drawSVG But, you can emulate the desired presentation why using drawSVG on a series of lines,
  21. Hi @Dan Burns and welcome to GSAP! It would be best to get this into a CodePen with minimal complexity and clear notes as to what you would like to achieve (not necessarily how you would like to achieve it). The code above leaves a lot to the imagination. Here is a pen for you to get started,
  22. So long as the animation isn’t crucial to communicating information, it doesn’t interfere with the document flow, and isn’t a hinderance to site navigation ... you’re good. If you’re following progressive enhancement, and utilizing aria landmarks ... you should have no worries.
  23. Which OS and browser version? In MacOS (Mojave) with Firefox 62 ... all looks good here (actually better than Safari and similar to Chrome)
  24. @yannick, I think rather than thinking of it as reverse (which is actually doing exactly what it should do ... reversing the playback with respect to tween timings as the playhead came to the end), you should consider a separate timeline to "start at 0" from the other direction. Here is a code pen illustrating both reverse() and a "pseudo" reverse (i.e. explicit tweens in the other direction). I've hardcoded some values for simplicity's sake (i.e. no value arrays or expressions to calculate element placements ... which I'm sure in a real world scenario would be likely). I also used set() vs fromTo() just to be more explicit. Hope this helps!