Jump to content


  • Posts

  • Joined

  • Last visited

Everything posted by iotron

  1. Benefit: single configuration file(plugin) for gsap
  2. Sorry for the spam. I have been trying to implement the snap to centre for the active element (final angle for the elements container) for a while now. Having failed at that, I tried to reverse engineer the horizontal loop which has the snap function for creating the 3d slider, which won't work on this type of transform as you pointed out. That's why I am in a fix now. I have implemented all the animations with gsap on the project and it makes little sense to add any other library just for the sliders. It would be very kind if you could help me implement the snap function in the 3d slider. Thank you.
  3. Hi, I am trying to create a 3d slider using the gsap codepen example horizontalLoop function. But since the 3d slider is using the Draggable object directly. I am having difficulty setting the horizontalLoop function correctly. Can anybody kindly point out what I am doing wrong? original 3d slider (doesn't snap to center) https://codepen.io/iotronlab/pen/poKEgzZ
  4. Working example of context with gsap imported via nuxt plugin. For gsap club plugin implementation, check the slider page. Let me know if you see any performance issues on the setup. https://stackblitz.com/edit/nuxt-starter-t4ha6v?file=layouts%2Fdefault.vue,pages%2Findex.vue
  5. Thank you so much for the examples. I am migrating my project from Nuxt 2 to Nuxt 3, and most of my animations are using the gsap object directly for creating reveal, text, and svg animations. Rewriting the object usage animations to context usage would take extra workload, that's why I took the plugins way to import the gsap/plugin objects and rest of the code works the same. I am not usually removing any components, only adding them incrementally through animations. My objective is to build the app with optimal performance and build size.
  6. I have been able to successfully implement gsap in a nuxt 3 plugin with the following steps. Create a gsap.client.js in plugins folder. import { gsap } from 'gsap' import { ScrollTrigger } from 'gsap/ScrollTrigger' import { ScrollToPlugin } from 'gsap/ScrollToPlugin' import { Draggable } from 'gsap/Draggable' export default defineNuxtPlugin((nuxtApp) => { if (process.client) { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin, Draggable) } return { provide: { gsap, Draggable, ScrollTrigger, }, } }) and in your app.vue or any vue component. const { $gsap: gsap, $Draggable: Draggable } = useNuxtApp(); I have been directly using the gsap object instead of using gsap.context. Is these the correct and optimal way to use gsap with nuxt3?
  7. Hello, I have created this 3d slider for a landing page. I am trying to implement a snap to centre function for the cards so that one card is always at the centre at all times. Any example on how to proceed? Most of the examples work on horizontal loop function. Any idea of how to implement this layout in horizontal loop function would also work. Thank you.
  8. hello, I have made this slider with draggable. I am having difficulty positioning the slider between the sections. I have tried adding position: relative to the outer div, but it won't work. Kindly help.
  9. Hi, I want to make the active image/div snap to the centre of the slider. Kindly point me to the right direction.
  10. Thank you so much for the ideas. The buildings are the heritage of my city Kolkata, that's why I want to make the animation special. But my experience with animations is limited that's why "With a little masking and maybe even subtle parallax like movement overlay gradients etc" is out of my scope of imagination. Perhaps you can point me to any codepen with a similar effect so that I can try to figure out how to implement it. Thanks a lot. Your two cents are greater than my animation skillset. ❤️
  11. Sorry, my bad. I forgot to mention that the SVG is already optimized from SVGOMG. I am working on the SVG in Adobe illustrator. I have optimized the number of paths but it's still a lot because of the intricate design. So, there are a number of options I am thinking of trying, on which I would like your opinions. 1. Merge some of the paths into compound paths, lessening the number of paths. 2. Replace drawSVG with less resource heavy animations like opacity/autoAlpha toggle. Thanks a lot for the help. ❤️
  12. Hi, the animation is running a little sluggish on some devices, probably due to a large number of paths. Any ideas on how to optimize the SVG or the animation for better performance without compromising much on the design? Thank you.
  13. Hi, should we have a compound path in SVG or multiple single paths grouped for better performance in the draw SVG plugin? Also, is there any tutorial to efficiently design SVG for better performance with the plugin? Thank you.
  14. Hi, I am trying to change the fill color in the colorAnime function so the elements get randomised colors on each loop iteration. Kindly help, right now the fill doesn't change after the first iteration. Thank you.
  15. Hello, I am using the GSAP platform to build the landing page of our company website. I am still an amateur in GSAP and a noob in animations. This is the first SVG animation I have made from scratch, so I would like recommendations for improvements. 1. I would like to implement a circular wave animation similar to the Codepen below on the datacentres (dots on the globe). On hover/click, a circular wave animation would go out from the point of the event toggling the opacity. I have figured out the function from the codepen. I need some help understanding the function. I am trying to understand how to pass the "from" object passed from mouseevent click on svg paths I have isolated with datacentres variable. ``` $('.c').on('click', function(e) { staggerAnim.eventCallback('onComplete', null); // An approximation that works okay var gridX = Math.floor((e.layerX - (e.layerX / c.width * 2 - 1) * 20 - e.layerX / c.width * 75) / c.width * cw); var gridY = Math.floor((e.layerY - (e.layerY / c.height * 2 - 1) * 75 + 40) / c.height * ch); var i = cw * gridY + gridX; staggerFrom(i); //console.log(gridX, gridY, i); }); ``` https://codepen.io/creativeocean/pen/JjRNgNw 2. The connecting waves need a little glow and a trailing fade to make them look more realistic. I currently have no idea how to implement them. (SVG filters maybe?). 3. I would like the fill to change periodically from an array of colours in the blinkAnime() function. Can we implement it within gsap.to or use gsap.ticker function? Any other recommendations, link to tutorials, ideas are welcome.
  16. Hi, I am trying to add a drawSVG and text animation along with the morphSVG on the same scrolltrigger. I can't figure out where it's going wrong. Kindly help, @GreenSock https://codepen.io/iotronlab/pen/MWQEXXp
  17. This thread is a goldmine. Kindly pin it. Much love and kudos to the whole community and specially the core GSAP team. ❤️
  18. Thank you so much, it's perfect! ❤️
  19. Hi, I want to create a pinned section to morph the SVG and then continue scrolling much like this example. Unfortunately, I haven't been able to figure out how to pin and morph the SVG. Kindly help. Thank you. https://codepen.io/akapowl/pen/zYqLyPQ/6a2480c123d88dc391faba0ea5cc590f
  20. Hi, thanks for the help. Much appreciated. How can we add transition animation to the letters like slide-in-y?
  21. Hi, I am new to GSAP and animation. I have tried to create this animation to cycle words from an array. But the animation came out to be somewhat stiff cause I am a noob. 😅 How can I make the animation a bit smoother, like make the letters slide down like a casino while scrambling. Also, the word is not revealing letter by letter as was in the scramble text demo. Kindly help. Thank you.