[Import ModifiersPlugin Webpack]

Hi @Rodrigo,

 

thank you for your reply, I am using Vuejs and the project is created with Vue CLI 3 (webpack).

 

You are actually right, it seems it has to do with tree shaking, I didn't think of it since I didn't have this issue before.

 

So I got it working with two ways, the important part seems to be to reference the plugin in your code

 

import Draggable from 'gsap/Draggable'
import '@/assets/vendor/ThrowPropsPlugin'
import ModifiersPlugin from 'gsap/ModifiersPlugin'
import {TweenLite, TweenMax, Linear} from 'gsap'

//or according to the docs
import '@/assets/vendor/ThrowPropsPlugin'
import {TweenLite, TweenMax, Linear, ModifiersPlugin, Draggable} from 'gsap/all'


// mounted hook
const plugins = [ModifiersPlugin]

 

It feels it's not the prettiest solution but I guess it's the only one

 

thanks a lot for your help!

 

 

[Infinite Carousel with Draggable]

Hi @mikel,

 

I feel so silly, it makes sense to offset the list. 

 

So in my case that I want to have half list items visible I would do this: 
 

TweenLite.set(this.$refs.list, {
  left: -(itemWidth + itemWidth / 2)
})

 

Thanks a lot for your suggestion 

 

[Infinite Carousel with Draggable]

Hi everyone, 

 

I'm trying to create an infinite carousel following this

See the Pen ZOgGXB by osublake (@osublake) on CodePen

by @OSUblake.

You can see in the codepen that it does work but I have this weird bug that the item that needs to go in the beginning of the list gets updated too late(?)

I've been banging my head to understand what's going wrong, I feel I'm missing something simple so I thought maybe someone has a suggestion.

 

thanks

See the Pen aQYMNj by tsimenis (@tsimenis) on CodePen

[Import ModifiersPlugin Webpack]

Hi everyone, 

 

I am using the modifiers plugin alongside other gsap plugins. 

During development everything works fine but when I build my project I get this error:

 

invalid modifiers tween value: [object Object]

 

This is how I am importing the plugin:

 

import {TweenLite, TweenMax, Linear} from 'gsap'
import '@/assets/vendor/ThrowPropsPlugin'
import Draggable from 'gsap/Draggable'
import 'gsap/ModifiersPlugin'

 

Any help would be appreciated

 

 

[SVG Sine Wave - emulate audio equalizer]

This is amazing work Blake!

 

Well it is easy for you to say... I had quite a few new things to learn from your example ( e.g. the ticker listener ) but I am deconstructing it and I'll get to the result I wanted soon. 

 

Before your reply I was working on your initial codepen with modifiers plugin to change to the y value of a point based on a value I was tweening ( from 0 to 1 ). But your example is way better.  

 

I will post here my finished results as soon as I have time, both my first attempt and the final version, for anyone to see. 

 

Thanks again!

[SVG Sine Wave - emulate audio equalizer]

Hey @OSUblake,

 

thank you for your reply.

Yeah it doesn't need to be the same as in the video. I just want to have an effect as a beat or pulsing sine ( similar to my codepen but better, if I am making any sense )

 

If you could make a demo it would be awesome!

 

thanks again

[SVG Sine Wave - emulate audio equalizer]

Hi guys, 

 

this is the first time I write to the forum, mostly because I've always found really helpful topics in the past.

I want to create an svg animation that will resemble an audio equalizer, with some random spikes on the curves and be able to control the timeline. It needs to start with a straight line animate to some curves and return to a straight line.

The effect I would be going for would be similar to this https://www.youtube.com/watch?v=bpOSxM0rNPM (does not need to be 100% same of course )

 

My initial tryout was to use the MorphSVG plugin, which seems to be close to what I want but I am not 100% sure, I mean it looks ok but that's it, you can see it here 

 

But then I found this example from @OSUblake

See the Pen ?editors=0010 by osublake (@osublake) on CodePen

as well as this post that explains how it works https://greensock.com/forums/topic/15270-animating-waves-with-gsap/?p=66401 and it looks really awesome and smooth. 

 

The thing is though that I don't know if there is any way to modify this example to create a timeline in which I will be able to change the amplitude/frequency, or should I stick to morphSVG? 

 

Any help/advice would be highly appreciated, thanks!

See the Pen yMzWwv by tsimenis (@tsimenis) on CodePen