Jump to content
Search Community

Shrug ¯\_(ツ)_/¯ last won the day on March 23 2021

Shrug ¯\_(ツ)_/¯ had the most liked content!

Shrug ¯\_(ツ)_/¯

Moderators
  • Posts

    313
  • Joined

  • Last visited

  • Days Won

    4

Shrug ¯\_(ツ)_/¯ last won the day on March 23 2021

Shrug ¯\_(ツ)_/¯ had the most liked content!

2 Followers

About Shrug ¯\_(ツ)_/¯

Recent Profile Visitors

6,848 profile views

Shrug ¯\_(ツ)_/¯'s Achievements

  1. Nice job @mvaneijgen, The following may offer a less fuzzy understanding of the transform / coordinate system change when using objectBoundingBox. https://www.w3.org/TR/SVG/coords.html#ObjectBoundingBoxUnits This converter should also be useful at times for deriving the needed [0,1] coordinates when using objectBoundingBox. Instead of squinting to design 1x1 artwork 🎨 😁. https://yoksel.github.io/relative-clip-path/ Transform can also be used within SVG on 'appropriate items' when using objectBoundingBox and [0,1] coordinates. Utilizing the following basic math: Formula: 1 / Width 1 / Height Example / Output: 1 / 550 = 0.001818181818182 1 / 325 = 0.003076923076923 Then use appropriately in SVG: transform="scale(0.001818181818182, 0.003076923076923)”
  2. Is this a GSAP question ? I don’t spot any GSAP logic being used in your CodePen and the main.js on your live site is also using the same code as your CodePen ? Once the image resources load it appears smooth to me though.
  3. Welcome to the forum @anisos, that example is more of a WebGL, Shaders and complex logic question than it is about GSAP. Of course GSAP can animate anything on the web that it has access to. Here is one such example using GSAP where you can see the overall complexities of such an effect. https://codepen.io/RobinNavas/pen/KKNZLVZ Another simpler option would be using multiple Masks or Clip Paths (either SVG or CSS) for a less elaborate effect like the next example again using GSAP. https://codepen.io/theseventh/pen/yLYLjpg Besides the GSAP Core, you can leverage ScrollTrigger and Draggable, etc., which all work and sync up perfectly to the GSAP Core for even more fabulous possibilities. All these methods can be researched and discovered here on the forum, through the documentation and across the web in places like Youtube, CodePen and Codrops. In general custom sliders, carousels, galleries all require complex JavaScript logic beyond the scope or intention of this forum. Effects such as the link you shared introduce further complexities and required knowledge, so libraries like Three.js, Pixi.js, WebGL libraries, Shader sites, etc., can greatly assist you in conjunction with GSAP. Happy animating with GSAP regardless of what overall approach you decide to take. Good luck with your project. 👍
  4. Welcome to the forum @ManishDev18, In addition to @mvaneijgen's always great advice and guidance, I thought it might be good to include this post from an older thread. It’s directly related to your initial screenshot although older and would need to be migrated to GSAP 3 with all its newer available features & utility methods, etc. Maybe it will also be useful to someone.
  5. What article is that ? Similar has been inquired about previously on the GSAP forum. For instance this previous topic along with this one discussed a similar effect. The examples found in those threads should help you accomplish your goals, all the best with your project. PS: MorphSVGPlugin for the win, worth every penny. ?
  6. Using @Rodrigo's above example the following would be closer to your example: gsap.set(skewBox, { rotation: 210, skewX: -30, scaleY:0.864 }); It might not be applicable to your desired setup (Div matching SVG) but wanted to mention that morphSVG plugin-in not only morphs shapes but also position and size, which at times can prove very useful. It would simplify things to choose all CSS or SVG, then either build everything with CSS and use the Flip plugin, or everything with SVG and use morphSVG, if you can ¯\_(ツ)_/¯.
  7. You might be able to utilize some logic / approach from these two older pens by @OSUblake . https://codepen.io/osublake/pen/WjWPob https://codepen.io/osublake/pen/aRoqKm/c3a8ca782b69eedf260af82788d0084a
  8. Welcome to the forum @zeus1021 , The vertical conversion has been discussed a few times already on the forum based on this original thread and subsequent article by @jh3y . See the following thread for an example of vertical conversion, take note to update the version of GSAP. That should get you going, good luck on your project.
  9. Welcome to the forum @Pecuarios.com , thanks for being a Club GreenSock member. Based upon your description, I think the below examples will help you. These should all give you a starting basis of understanding to further modify things based upon your requirements and accomplish your desired criteria. https://codepen.io/osublake/pen/LdMjaL https://codepen.io/mikeK/pen/JjYaeRe/cf3df695077b033d9cab544546e2c3ca Here is a relative tutorial - https://www.motiontricks.com/movie-countdown-animation/ Here is another fun one not using GSAP, although with some effort the animation could be converted to use GSAP. https://codepen.io/lonekorean/pen/eYVrWoq Good luck on your project and enjoy using GSAP.
  10. Yeah sorry , I've edited my post (removed links) to not diminish or muck up your thread.
  11. Noticed the following Blender script the other day. It’s fairly new but maybe something to keep an eye on. Definitely an interesting endeavor so hopefully it develops further. B2G - Export Blender animation to GreenSock https://github.com/gecko0307/b2g You can use Bodymovin / Lottie coming out of After Effects (or other apps) with GSAP. Search around and you’ll find various information and examples pertaining to that across the web.
  12. You’re still approximately 300 lines of code past the original concept by @ZachSaucier . I suspect most your issues are coming from your own additional logic (not GSAP) concerning the features you have added and the general jquery-ifying of things probably has not help also. ?
  13. Welcome to the forum @Fly The Coop, In addition to the examples that @Rodrigo provided above, the following additional examples might prove useful for yourself or someone else also. https://codepen.io/GreenSock/pen/eYBYMyw https://codepen.io/medienbaecker/pen/vYgLYBL https://codepen.io/mikeK/pen/eYNaxxd https://codepen.io/PointC/pen/GvyXYX Hopefully something helps your efforts towards your goals. ?
  14. Matter.js is not a GSAP product, so there is no support provided for it here, that is out of the scope of this forum. However you will find many example demos on their site, CodePen, etc., all the links can be found on their site. Maybe take a look at using sprites (again many examples can be found for this) in doing so you can use any desired shape or object. All the best on your project.
×
×
  • Create New...