iotron

Benefit: single configuration file(plugin) for gsap

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.

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

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

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.

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?

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.

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.

Hi, I want to make the active image/div snap to the centre of the slider. Kindly point me to the right direction.

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. ❤️

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. ❤️

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.

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.

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.

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.