Jump to content
Search Community

iotron

Members

  • Posts

    21

  • Joined

  • Last visited

 Content Type 

Posts posted by iotron

    Need help with GSAP slider

    in GSAP

    Posted

    On 2/4/2023 at 5:25 AM, Rodrigo said:

    Hi,

     

    Sorry for the delay.

     

    As far as I can tell the endless horizontal loop helper function is not intended for this type of transform. Basically here you're dealing with angles and not translation, which is what the helper function is for.

     

    Is worth noticing that, with this one, you have created three threads regarding the same subject (in fact the codepen URL is the same - not the endless loop implementation though). This is about the final angle of the elements container.

     

    I'll try to take a look at it tomorrow and see if I can come up with something to help you get started on that particular path.

     

    Happy Tweening!

    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.

    Nuxt 3 setup with plugins

    in GSAP

    Posted

    17 hours ago, Rodrigo said:

    Hi,

     

    If your plugin is making the GSAP global constructor available without imports, it would be important for you to document GSAP Context for your users to be aware how to use it with your plugin. At the end of the day they have access to the same functionality and features, right?

     

    Basically what you have to do is use that particular gsap instance from your plugin and create a GSAP Context.

     

    Just to be sure and give the best possible solutions for everyone, would you be kind enough to fork this GSAP & Nuxt3 template and implement your plugin in it. Don't worry about GSAP Context yet, we'll get to that later, for now I'm interested in how it's implemented in order to see  the next steps:
    https://stackblitz.com/edit/nuxt-starter-6nxgbu?file=app.vue

     

    Happy Tweening!

    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

    • Thanks 1

    Nuxt 3 setup with plugins

    in GSAP

    Posted

    18 hours ago, Cassie said:

    Hi there!

     

    Context is really helpful for cleanup. You can use GSAP without it but you'll have to manually cleanup animations if you remove components

     

    Here's some demos that may help you - 

    https://stackblitz.com/@GreenSockLearning/collections/gsap-nuxtjs-starters

    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. 

    • Like 1

    Nuxt 3 setup with plugins

    in GSAP

    Posted

    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?

    • Like 1

    gsap 3d draggable slider snap

    in GSAP

    Posted

    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.

    See the Pen poKEgzZ by iotronlab (@iotronlab) on CodePen

    Optimise SVG animation with high number of paths

    in GSAP

    Posted

    17 hours ago, iDad5 said:

    I really like what you are doing, being an architect by education I really like that blue-print style. I do remember well the times, when we hat to reduce plan details because even or the state of the art sgi workstation wouldn't be able to handle them...

    While the animation is impressing, I had to watch it multiple times before having understood some of what is going on, my suggestion would be to think in layers, maybe work with  a png background that is intentionally slightly blurred and use svg only for the crisp background?
    With a little masking and maybe even subtle parallax like movement overlay gradients etc, you can do a lot of magic too...
    Just my two cents...

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

    • Like 1

    Optimise SVG animation with high number of paths

    in GSAP

    Posted

    20 hours ago, GreenSock said:

    Oh my goodness. Yeah, that's asking a LOT of the browser to render. Yikes. I would definitely recommend simplifying that quite a bit. You'd need to do so in your authoring software. You can try SVG OMG, but I'm not sure how effective it will be: 

    https://jakearchibald.github.io/svgomg/

     

    It seems to me like you'd need to be intentional about going in and eliminating a bunch of those paths. There's no way a software package can effectively automate that and know exactly which paths to completely delete, you know? 

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

    Optimise SVG for draw SVG plugin

    in GSAP

    Posted

    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.

    Need help in implementing interactivity in SVG animation

    in GSAP

    Posted

    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);
    });

    ```
     

    See the Pen JjRNgNw by creativeocean (@creativeocean) on CodePen

     
    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.

    See the Pen MWVWvgP by iotronlab (@iotronlab) on CodePen

    Scramble text effect cycle array

    in GSAP

    Posted

    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.

    See the Pen oNEYWxz by iotronlab (@iotronlab) on CodePen

×
×
  • Create New...