Jump to content
GreenSock

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

Leaderboard

Popular Content

Showing content with the highest reputation on 07/25/2019 in all areas

  1. Hey all I wanted to share this with you! ElCanvas: https://github.com/luckyde/elCanvas I spent 6 months on a canvas library which I built around gsap and I wanted to share it here! I wanted to create a library which I can use to animate in Canvas and still use objects, so I spent a while trying to create a layer of seperation and this is what I got! The TLDR is now instead of drawing a rectangle on the canvas, then redrawing it with a bunch of ctx commands I can do this: var myRectangle = new el.rect({width:30,height:30}); el.update(); And If I want to animate it i can put a setInterval or since I use GSAP I would do TweenMax.to(myRectangle,1,{width:60,height:60,rotation:90, onUpdate: el.update}) So the whole goal of this as I'm hopefully explaining here is to DOM-ify canvas commands like rectangle,circle,customshapes,text and more so that its extremely easy to draw on a canvas context and animate in it! The reason is because DOM animation and SVG animation started to lag hard on the game I'm working on but canvas worked great on all devices! I'm not allowed to use huge libraries like pixie or phaser so I thought I would make a mini library that just does what I need it to do! Supported objects at this point supported properties at this point Examples!!! Parenting / Character animation: http://thisgoodboy.com/elCanvas/_tests/SoloBot_intro/ Logo Animation: http://www.thisgoodboy.com/elCanvas/_tests/_word_seeker_logo/ Text animation (CLICK on the gray space over and over for different animations): http://www.thisgoodboy.com/elCanvas/_tests/el_canvas_30points_v3/ Particle effects using canvas blend modes: http://thisgoodboy.com/elCanvas/_tests/FF_board_clicker/index_manual.html Using images/shapes/custom shapes http://thisgoodboy.com/elCanvas/_tests/bot_message_waiting_for_oponent/ Once again without GSAP and it's ability to modify objects optimally and with precision none of this would be possible I really hope this is useful to someone else too!
    5 points
  2. Here's my devil's advocate comment: It sounds like all you're needing is to fire some animations when elements get scrolled into view. Unless you need some of the advanced functionality in the ScrollMagic library, a simpler approach would be to use the native IntersectionObserver API to listen for when elements get scrolled into view, and then call your GreenSock animations when that happens. It saves you from loading in another third-party library in favor of native functionality, and also gets rid of listening for the browser's scroll event, which is costly (I'm assuming that ScrollMagic still listens for the scroll event; they may have changed that since I've used the library). In regards to the smooth scrolling, I personally don't like it and typically recommend that others not do it. I'm sure some of it has to do with preference, but there are also some accessibility and other concerns with smooth scrolling. So if you do decide to incorporate that effect, please be mindful.
    5 points
  3. I'll take a look at it next week. I'm traveling right now. Luckyde, I'll also respond to your PM when I get back next week.
    4 points
  4. Hey @sathishkumar, Welcome to the GreenSock Forum. Here just another approach ... https://codepen.io/mikeK/pen/ymaBaB Happy tweening ... Mikel
    3 points
  5. No rush on that, its more of a work related question. elCanvas is more work and passion project too I am also working on a converter that imputs svgs and outputs them as canvas code, when i get time off i hope to develop it more so people can convert svg assets to pure canvas with this and animate then in gsap
    3 points
  6. If you want Blake to appear you have to say the magic word three times in a row. "canvas canvas canvas"
    3 points
  7. I did something similar for another forum thread answer. Maybe this will give you some ideas too. https://codepen.io/PointC/pen/KGvZew Happy tweening.
    3 points
  8. Here is an example integration of ScrollMagic along with Smooth Scrollbar. https://codepen.io/luluberlu/pen/gZGwoW The integration of those two is also discussed in the following discussion (perhaps others also). https://github.com/janpaepke/ScrollMagic/issues/652 Maybe that might assist you in some way if you wish to take that approach. Of course test extensively regardless of what approach you take to ensure what you create is performant across browsers and devices as the users scroll. @OSUblake, ? that example and related thread(s) will never die, its part of your legacy here at the forum. ;--) ¯\_(ツ)_/¯
    3 points
  9. The character animation aspect sounds cool for sure, especially coupled with the SVG to Canvas, that might be another viable workflow for animators using GSAP. I saw you're a technical animator so you certainly have insight into workflow into those aspects. Keep up the good work, nice job and thanks for sharing!
    2 points
  10. Thanks @Shrug ¯\_(ツ)_/¯ ! That's pretty neat yeah mine is similar, I added a lot of support and open mess for canvas calls and all built in canvas functionality e.g. you can can set canvas blend modes, make custom shapes , as well as things like parenting which allow character animation , transform origin points and chaining canvas commands so the overall code is way shorter. if it doesn't get huge traction it's all good with me I'm using it on words with friends for Facebook so I'm gonna keep updating it as long as I'm working here at least! And past this I'm hoping to keep using this because of the small file size for banner projects
    2 points
  11. Thanks for sharing @Luckyde. Nice job, congrats on your efforts and the release of elCanvas. The converter sounds interesting also, I've messed around with that myself >< both ways. At a glance some aspects remind me of the TweenCanvas library, which didn’t get much fanfare (except a singular like from OSUblake ;--) when posted here. https://greensock.com/forums/topic/6076-html5-canvas/?tab=comments#comment-79286 I’m looking forward to hear @OSUblake's feedback on things once he concludes his "Planes, Trains and Automobiles" excursion. Be safe out there.
    2 points
  12. OK. The site is finally live, and I'm really excited about how the animations turned out on it: Especially the Logo hover, mobile hamburger toggle, and (very related to this thread) the heading animations. Hope you all like it, and thanks again for the assist in debuggin the SplitText issues in Safari. Here's the site: https://wavesforwater.org/
    2 points
  13. This has been super helpful! I have just managed to finish building a infinite carousel which auto scrolls when you navigate left and right using ScrollMagic + GSAP. https://codepen.io/nolimit966/pen/zgBxwO Still a little tidying up to do but you get the jist of it
    2 points
  14. WOW thank you!!! ❤️ Tweening will be happy now
    2 points
  15. You don't need two loops and two controllers. I just meant to make a second scene for each section in the each() loop. You can then set the same trigger hook and just offset the second scene by 80% of the element height. I think something like this should work for you. https://codepen.io/PointC/pen/GVqbMK Make sense? Happy tweening.
    2 points
  16. If I understand your question correctly, I think setting up a two timelines and a second trigger for each section would be the way to go. The opacity --> 1 tween plays when the section hits the first trigger and then the opacity --> 0 tween plays when the element is 80% of the way through the scroll. This is all assuming you want the tweens to play with their actual duration. If you're trying to have them play as the user scrolls then one timeline would be fine. Just set the second tween to play later with a relative position, delay or label. Make sense? Happy tweening.
    2 points
  17. Hello Sathish and welcome to the forums. All those images on the Stripe site sure are slow to load on my internet. I understand what you're trying to do in your approach but I might take a different approach. I'd try to do it by: Positioning all of your images to the right of the viewport, each with a random Y. Creating a tween to move them from the right of the viewport to left of the viewport. Set the delay for each randomly between 0 and the negative of the total duration you want to have for the animation (or randomly set the progress between 0 and 1). Looping the tween infinitely. To me this approach seems more simple and requires a lot less of a headache of calculations. Alternatively, you could use approximately the same approach that you currently have but use the Modifiers plugin to detect when you should move the bubbles back to the right side. Here's a simple demo using that approach with blocks. https://codepen.io/GreenSock/pen/OKNadm
    2 points
  18. Hey @Zhiyi Zeng, Well, what your computer does that may be questionable. But GSAP SplitText runs properly ... https://codepen.io/mikeK/pen/PMzddE Best regards Mikel
    2 points
  19. Hi @mikel, Thank you so much for your help, we are clear with the responsive issue, and we were able to solve the issue. Thanks a Lot. @ZachSaucier Thank you for Helping us out, we are going through the documents, thank you guys for all your support. Happy Tweening... Regards, Akshay Manoj
    2 points
  20. Cool, @Luckyde! Looks like something for @OSUblake to comment on
    1 point
  21. ...Maybe I should try other computers? Thank you for your help? Best wishes, Zhiyi
    1 point
  22. Hi @Zhiyi Zeng, Take a look at this topic: dynamic-amount-of-paragraphs https://codepen.io/kvonspiczak/pen/oROPov Happy splitting ... Mikel
    1 point
  23. Hey @Zhiyi Zeng, Does this pen help you? https://codepen.io/mikeK/pen/zgBaqB Happy tweening ... Mikel
    1 point
  24. ScrollMagic is not a GreenSock product. There are threads about it here, but it's not officially supported. That being said, check out this post and demo from @OSUblake. We've also discussed smooth scroll at length in these threads. Happy tweening.
    1 point
  25. Hey @Akshay Manoj, A little help ... https://codepen.io/mikeK/pen/YmqaXo More: Happy tweening ... Mikel
    1 point
  26. You can find the GSAP documentation at https://greensock.com/docs As the link I provided before says, I would recommend that you animate your logo based on its container sizing. There are multiple ways to do that and the best way depends on how you need it to behave. There's no special trick to make it automatically responsive. You need to code it the right way, but as I said I don't have time to do it for you.
    1 point
  27. @ZachSaucier @GreenSock I have updated my comment with an example ?
    1 point
  28. You could use TweenCanvas for that: https://github.com/3dimm/TweenCanvas
    1 point
  29. Well, here's the start of something. Put a data-depth attribute on your element like so. 0 will be no offset, 10 will be max offset. <div data-depth="10"></div> And then create a smooth scroll instance. var scroller = new SmoothScroll({ target: document.querySelector("#scroll-container"), // element container to scroll scrollEase: 0.1, // scroll speed maxOffset: 500 }); With maxOffset set to 500, an element with a depth of 10 will move 500px. 10 / 10 * 500 = 500 A depth of 5 will move 250px 5 / 10 * 500 = 250 And so on... 4 / 10 * 500 = 200
    1 point
  30. I'm sure @OSUblake will appear once he recompiles himself with new upgrades, but in the meantime I would suggest just browsing his CodePen profile (https://codepen.io/osublake/) to see what is possible with GSAP and Canvas Here are a few favorites: Also be sure to read this entire thread as Blake shares a lot of details about doing a whole bunch of different things with canvas:
    1 point
×