Victor Work

I believe this effect has been done with a WebGL library, it can be ThreeJs or PixiJs. This site was made by one of the members @jesper.landberg here of the forum. But you can use GSAP to animate the values that the Distortion Filter animation performs.

You're completely correct Blake, I need to study the vanilla and so increase my level in javascript. I'm going to be a fan of your recommendation, and I'm going to study those thoughts that you sent me, I'll soon be back on the topic with a demonstration that will make you proud. ?

Blake, I confess that I'm analyzing your pen for about 20 minutes and I came to the conclusion that: Either I'm very new to JavaScript or you're very advanced ... But I think it's both options, lol. hahaha Could you make a simplified version with proxy and update progress animation using this pen I did? I would be very grateful, because this your slider pen is God level.

This is exactly what I would like to do, synchronize an event (can be the MouseWheel) with Draggable. I do not know how I could do this, but there is a website (https://www.brontidebg.com/) that has a very similar effect to what I want to do. Note that page navigation happens with Scroll and Drag. I do not know how far this is feasible or possible, but I think it would be a good feature for Draggable

Hello Blake, How are you? First of all thanks for the demo, but I really need something that simulates the drag of draggable to be able to trigger on a gift event, as does the jQuery .trigger(). $el.mouseenter(function(){ this.trigger('Dragabble','left'); }) Is there a way?

Hello friends, I would like to know if there is a way to simulate the Drag on event using Draggable. I need to activate MouseWheel down to simulate drag to the left, and when activating MouseWheel up simulate the drag to the right.

Hello @LoBusker I've been in this same situation as you, I really like the GSAP + PixiJs junction and I also decided to venture using both. When I was learning I made a Pen, commenting line by line and in the end has a small demonstration of how to use the PixiPlugin of GSAP, Already do a lot of cool things using the filters as demonstrated by @OSUblake I hope it helps you in some way:

@PointC Very Thanx ? but great @Sahil, a prodigy of the GSAP, has no way of competing with him. Especially when typing like this (me in case):

Hi @kresogalic You can use the same method, you just need to add the animations in a hover function. If you do not use pug, I put as a comment the html structure used. Show us how it turned out. ?

Thanks Jack, but now there are only 900 likes left. hahahaha It is not very easy which shows how much you are all dedicated to helping Forum members.

Hello @kresogalic, could you post a codepen from your replica attempt? But if it is animation with text, I believe that the demonstration below will give you an idea,} there are several ways to do it, that was the one I found easier. Using the GSAP SplitText Plugin. Look: Hope this helps you. ?

I'm very happy for Jack's recognition, because you can be sure, the way was long and work was hard, but I see you're paying off. But it was only possible because you and moderators created a beautiful and efficient tool, with a syntax that any layman can understand. Congratz to you guys for that. And today according to the system of the Forum I become Specialist (uhulllll), and helping others is the minimum when I see that I was helped by many here in the forum. And one day I'll be Superhero too hahahhaa ? So... Happy tweening!

Many will say that it is impossible to learn GSAP without knowing a minimum of JS, but believe me I started my life as a developer (2016) by first tinkering with GSAP without knowing anything about HTML / CSS let alone JS. I've always been a designer and wanted to know how to make my sites, so I started using Adobe Muse (discontinued) that generates the site only using the visual mode, then I felt the need to use animated elements, I left for Adobe Edge Animate (discontinued too), but I still felt much lower than the animations of reference sites in Awwwards until I started to study how they did that animation and it was there that I came to the beloved GSAP, and believe me, I started to use GSAP without knowing anything about code, a video that helped me a lot it was the videos created by Petr Tichy (Link of videos), and also the moderators here of the forum because I asked a lot of questions since I did not understand anything of what I was doing hahahaha. Summary can be used however as Jack @GreenSock said, it is much harder, much better and more yummy when you know what you are doing. Good luck and remember: Learning is never too much. Ps .: Today I do everything in the manual hahahaha

Hi Tiago, I made a pen simulating the transition of the site you mentioned. But first I think it is interesting to make some observations: 1) When you instantiate the Timeline and nest the Tweens one underneath the other, it is not necessary to put the name of the object every time, you can insert it only once. Like this: let tl = new TimelineMax() .to(...) .to(...) .to(...) // or let tl = new TimelineMax(); tl .to(...) .to(...) .to(...) 2) Since you are animating empty elements, I believe it is easier to animate using scale or xPercent, which will use transform () and have better perfomance than animating Left property 3) When you use Codepen you can insert the libraries directly into the Javascript Session, it becomes easier to manage the libs. Will take that to help you somehow. This pen:

Hi @jeb, To illustrate, I've added an onComplete in the middle of your animation, and an onReverse in the Timeline, so that it fires when the scene is redone. Is that what you were trying to do?

I used jquery to speed up the process hahaha . But basically the dynamic consists of linking the text to the clicked element, and the text you can change to the correct using the data attribute, or if you prefer using an array with in the javascript itself.

I believe that if you create an Example in Codepen with what you are trying to do, it will be easier to help you. Take a look at this: On making a TimelineMax between Tweens, I believe you can use the onComplete method inside your animations. And when you return to state 0, you can use onReverse. Look this: https://greensock.com/docs/TimelineMax But really if you have a Pen, it's easier to find a way to help you.

Hello Gabriel, I do not know if this is what you wanted to do, but I have adapted your pen so that it changes the contents of the hover text according to the clicked dot, to achieve this I used the date attribute in the dots, inserting the desired text. Making it easier to manipulate via html, but could create the texts in other elements or via JavaScript. And includes navigation with the prev and next buttons. I hope this helps you in some way: Bonus: I put an opacity system in the dots to know which one is active.

I believe that will solve your question. But anyway if you want to test out of your development environment I've created a Codepen mini-site using BarbaJS + GSAP, feel free to give a Fork and do some testing. } It has a similar transition with this OSU Blake pen. https://codepen.io/victorwork/project/full/ZeYREp Hugs

I have been using BarbaJs on some recent projects, and I have been through this same challenge. The solution I found to redefine the elements for the initial states is to use the BarbaJs Views system (see how it works at this link). Then when rendering the new Container you can use the ClearProps or TweenMax.set or TweenMax.fromto, in the event: let Homepage = Barba.BaseView.extend({ namespace: 'homepage', onEnterCompleted: function() { TweenMax.fromTo($el, time, {stateInitial},{stateTarget}) } }); Homepage.init(); I hope this helps you. Any questions just ask.

I took a look at the pens presented in the topic but I confess they are a little above my level of understanding, but I tried to do using the track similar to the way @GreenSock (Jack) uses in his example, but skewX does not render the value of the track, Why? The attempt is below.

Thanks @OSUblake, I'll try a description, but very cool the pen.

Hello, @Niek Roemahlewang Have you tried to take a look at this? https://greensock.com/docs/Utilities/Draggable/isThrowing

Hello GSAPer's I'm trying to make a Draggable Slider similar to this one in Link (https://asaro.co.uk/experiences/challenges/). But I could not find the best way to make the skew proportional to the drag force. And I also noticed that the draggable of the ((https://asaro.co.uk/experiences/challenges/) has a greater force when pulling the container, can you do this using the Draggable Plugin? here is my attempt:

Is Invalidate () a new feature? I gave a quick read in the documentation, there I wanted to understand the main points of difference between invalidate () and clearProps (). And congratulations to all staff that even in the users believing GSAP is quite complete, but you still keep working and surprising us with news. So I always recommend to my friends dev that they invest in the acquisition of the premium subscription, it is the minimum to compensate for such dedication that you put in lib ❤️