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. Have a look here, you can see how it is drawing the SVG. I've done 3 ... your SVG, an SVG only using a wide stroke, and an SVG with a stoke and fill. Hope this helps!
  2. Hi @Afro, DrawSVG needs the stroke of a path, line, polyline, polygon, rect or ellipse .. but it looks like you are passing the whole SVG to the tween. Can you post the actual SVG of the bolt so I can show you?
  3. Hi @Alan Kell, I would say you can tween to the calculated position but then, once there, you would need to do some DOM manipulation to get it there in the document flow (perhaps with additional styling to accommodate via a newly assigned class) so that further DOM manipulation (i.e. whatever content is making the page height grow) allows the image to flow naturally and "stay in position".
  4. @vintage12 Nice site, by the way! After the initial scroll in ( "Lets Go" click or user scroll ), the subsequent scroll navigation looks like it could use some debouncing. But .. I'm curious if the star movement on your site is where you are seeing any jitter. Because I see none here.
  5. On the contrary ... GSAP can far outperform CSS. I haven't picked through what is going on within your site ... a typical issue is making use of CSS animations in conjunction with GSAP causing a bit of a battle. I'll see what I can find.
  6. Curious if tweening the `y` property (as opposed to the `transform` property) shows a noticeable difference for you.
  7. This sounds good on the surface, but with Tweens all of those delays are absolute (relative to zero). Depending on the number of tweens, that could spell trouble if an early Tween's timing or positioning (i.e. delay) needs to change. For example, let's say every Tween in this series needs to begin .25s before the previous Tween ends. TweenMax.to( '#something-1' , 1 , {x: 100} , 0); TweenMax.to( '#something-2' , 1 , {x: 100} , .75); // prev delay + prev duration -.25 TweenMax.to( '#something-3' , 1 , {x: 100} , 1.5); // prev delay + prev duration -.25 TweenMax.to( '#something-4' , 2 , {x: 100} , 2.25); // prev delay + prev duration -.25 TweenMax.to( '#something-5' , 3 , {x: 100} , 4); // prev delay + prev duration -.25 Now change the timing of the second Tween to 2.3 seconds (ugh ... yes simple math, but not fun) Instead take var tl = new TimelineMax(); tl.to( '#something-1' , 1 , {x: 100} , 0) .to( '#something-2' , 1 , {x: 100} , "-=.25") .to( '#something-3' , 1 , {x: 100} , "-=.25" .to( '#something-4' , 2 , {x: 100} , "-=.25") .to( '#something-5' , 3 , {x: 100} , "-=.25"); Now change the timing of the second Tween to 2.3 seconds var tl = new TimelineMax(); tl.to( '#something-1' , 1 , {x: 100} , 0) .to( '#something-2' , 2.3 , {x: 100} , "-=.25") .to( '#something-3' , 1 , {x: 100} , "-=.25" .to( '#something-4' , 2 , {x: 100} , "-=.25") .to( '#something-5' , 3 , {x: 100} , "-=.25"); That's it, nothing else changes.
  8. My absolute takeaway from this was that TweenMax and TimelineMax are swapped in @soupking post ? I can’t for the life me see how tweening separate elements with relative timings is easier with Tweens than Timelines. I mean, that’s exactly the use case for Timelines ... sequencing.
  9. I would not animate the image width at all ... you'll get some horrible squeezing of the image itself. If what you're looking for is an overlay to tween from right to left to reveal an image, you can still use what I have shown above. Here is an example, Note, the swipe is right to left as you asked for in the first post (the example you provided is left to right). Principles all remain the same for either direction.
  10. Hi @rakan and welcome to GSAP! Please see the CodePen below that shows you how this can be done. Note I'm rotating a parent of the circle because it makes it pretty easy to position the circle, size the parent and keep things consistent. There are other ways (using transform origin, for example), but I think this a simpler way to go. Hope this helps!
  11. Hi @Emilek1337 and welcome to GSAP! Within the fromTo, your starting *from* a scale of 1.5 (and not tweening that property in the *to* so no change) and going *to* xPercent: 100. So, what you want is the from to start at xPercent: 100 and go to xPercent: 0. See the CodePen illustrating this. Hope this helps!
  12. I think you'd be surprised at how many individual spanking new to GSAP are well versed in things like React. But, that's not the point I'd like to make. At the root of it, I hope you understand that this community wants nothing more than everyone to succeed with GSAP. And we love to celebrate users' successes. We work through problems, explain the documentation, hammer out issues in CodePen, point to articles and tools that can help users, etc. ... all right here!
  13. There is no contradiction in these statements. The forum is for questions, answers, discussion, examples, direction, etc. When a question brings up a new concept, the threads can go deep and, if battle tested, can even affect changes to GSAP itself. Documentation is not for tutorials; it's a user manual. If I buy a refrigerator, I expect the manual to tell me how to operate the refrigerator. I don't expect it to tell me how to modify my cabinets so it fits in the kitchen. But, I would definitely go to a home improvement forum to ask that. Because your idea of what is helpful is going to be very different than my idea, from Bob's idea, or Jane's idea. You may be into SVG where as someone else is into Canvas, someone else only wants to manipulate DOM elements like <h1>, <h2>, <li>. Some write their own HTML, some use frameworks that generate HTML. Are people generating this stuff client side or server side? jQuery or not jQuery? Or Zepto, or Angular, or React. The variables are too much to address these things in coherent way. The documentation is better left to detailing the API .. the forums are better left to dealing with the intricacies. The help is here freely to anyone. These forums are as open and responsive as any I have ever seen ... actually second to none.
  14. @David Spector, following up on the problem at hand ... do you have an example of what you'd like to see animated and how? If so, I'd be happy to make a screen recording of the SVG creation process and tweening the elements. I'll think you'll find it very straight forward.
  15. Excellent! Good luck with the project and do share when you're done! Looks great!
  16. In fairness, I explained what could be done with CSS, but followed it up with, "There are ways to create lines, arcs, circles, squares etc. with HTML and CSS ... but that's rarely good in practice." SVG is, for all intents and purposes, absolutely the answer here. GSAP at its core tweens (interpolates) Javascript property values and provides a mechanism to sequence those tweens (Timelines). The power of that it immense, however. So whatever APIs expose properties to Javascript are fair game. That's a facet of learning anything web related. Markup, CSS, Javascript, SVG, XML, asset creation, libraries, frameworks, etc. They are all distinct disciplines and one doesn't take on the responsibilities of teaching all the others. It seems like you need to take a deep dive into SVG; I think you will be quite surprised. SVG is a markup language, just like HTML and XML (amongst others). Javascript can output any markup and inject it into the DOM. Jack is not suggesting that SVG is better supported than CSS ... he's stating that SVG is better than CSS *shapes* (clip-paths). Again, Jack wasn't suggesting that *you* were asking for everything under the sun. He was responding to your statement, "Just because GSAP is a tweening library does not mean that you get to ignore the issue of creating the vector or bitmap elements of an animation. If you call it an animation library, you have to give complete advice, not just on the part you do (the JavaScript tweening functions). Right?" Asking an animation library forum and/or documentation to give "complete advice" with regard to the ins and outs of all web API's is a bit much. Asking in the forums for pointers is perfectly valid. And, to date, I think this forum has been incredibly responsive to any questions in providing pointers, advice, and working examples to those in need. You will find that the forum is anything but silent. Asking the documentation to do the same is far outside of the scope. These forums are exactly what it is you're looking for. SVG and canvas have been extensively covered in the forums, but it does take some searching. If you can't find, someone will often point you to the very post that dealt with it. If that doesn't exist, then a thread usually goes deep into to providing direction, if not all out answers.
  17. For animations of illustration based compositions, that's exactly what I would do. I would never imagine creating the assets with HTML and CSS. But, I think you're really missing what a single SVG is capable of. All of your animate-able assets can (and should, for the most part) be managed in a single file with each element individually addressable. I couldn't disagree with the statement any more strongly. GSAP is not ONLY for tweening vector elements. Is for tweening DOM elements, SVG elements, Canvas properties, and more. And does exactly that. It is not an asset creation tool.
  18. There are few things to do to make something like this happen. Manipulate the DOM to make a duplicate of each image to allow each "cloud" to loop. This means creating a wrapping container, cloning the cloud image and appending it to the new parent wrapper. Some CSS to make sure the containing wrapper is twice the width of the cloud it's containing. Tween each cloud wrapper by 50% of its width and repeat that tween indefinitely. Set the duration of each such that the closer clouds move by quicker and each layer back is slower than the previous. Hope that helps!
  19. If you're looking to present shapes on the screen, you can have a look at the CSS clip-path property (no IE support and I'm pretty sure no Edge support, however) Also, you're very limited on styling here since all the styling is applied to the element box, not the clip. So thing like borders and drop shadows will show through the clip, they are not applied to the clip path itself.
  20. GSAP is a Javascript library for tweening object properties having numerical values, and Canvas is certainly part of that group. Any Javascript you want to use to create such objects is suitable. There are ways to create lines, arcs, circles, squares etc. with HTML and CSS ... but that's rarely good in practice.
  21. Hi @Kamran, Depending on if you are using hashes ... this might get you going. All boils down to the onhashchange. https://stackoverflow.com/questions/25806608/how-to-detect-browser-back-button-event-cross-browser
  22. I guess I'm not following what it is you're after. Can you tell me if these two statements are true, and if any logic is missing? 1. The circle should follow the mouse cursor around the page. 2. When scrolling up or down the page, the circle should stay with the cursor in as close to real time as possible. If so ... my CodePen does exactly that. And if you are not seeing that ... can you tell me which browser and OS you're using?
  23. @wcomp, I've forked your pen and made notes. Should explain everything Hope this helps!
  24. Hi @payne199, It's hard to see what could be going wrong without seeing the issue isolated in a Codepen .. but here is one I whipped together that may help you. Hope it helps!
  25. Hi @Radizzt, The reason the image isn't tweened with the left property is that images are, by default, inline items with a static position. The `left` property affects the CSS left value ... and top/left on a statically positioned element has no effect. So, just as you have relative position on the `.box' divs, you must also have relative position on the image `.logo`.