Jump to content

Victor Work

  • Posts

  • Joined

  • Last visited

Everything posted by Victor Work

  1. Hello Gsap'ers I'm trying to cheer up a value, but I can not. Test to animate in Mousemove, it seems to work perfectly, however in the Tween I am not getting Can someone help me? Line 27.
  2. Hello guys, I'm trying to make an infinite scroll based on that reference: (This site). But I have not tried in some ways to leave the scroll smooth, with ease, but without much success, is there a way to do this through tl.progrees ()? Any help will be very valuable. Thanks
  3. @GreenSock Thanks for the words Jack, and I believe you have used the correct term: Empathy. It is very important to know the path you have taken and how you have managed to evolve looking back and helping people who also want to move forward. You can count on me, I'll always be here. [high-five] ? @elegantseagulls Very Thanks ^^ @Carl I believe that success is in recognition, and I want to acknowledge everyone who helps me. Thank you for the words @mikel Thanks Broo. ☺️ @Dipscom Thank you very much, I will not go any further. E muito sucesso para nois. sempre! hahahha
  4. Hello everyone, This post is going to be one of those a little long and for those more busy and timeless it is about: A person who had a dream and when he reached resolve to thank the people who helped reach that goal. Well let's go then: First, this was my first post on the forum: https://greensock.com/forums/topic/16437-animation-scale-left-to-right/ And on this date I still used Adobe Muse to make a website because I did not know anything about HTML / CSS, but I already wanted to be good, make sites cool, cool and one day I could gain recognition at Awwwards, so if you go see this post will see that mention a site that had just won this recognition. But it was impossible to win not knowing HTML and CSS, so I started to study and learned everything by scouring the internet inside, but something I was sure, to get there I would need to master doing Animations, so every day I needed to understand how it worked the GSAP. I was studying and creating new challenges and whenever I tried to do something and did not find the solution on the Internet, I was obliged to ask in this Forum, and at no time did I leave here without a useful answer, ready for me was very clear, I had found a source for learning and for evolution. So know that this is how I and many people see this forum. So after less than 2 years of many studies and many questions I finally decided to run my dream that was to gain a recognition at Awwwards, and to my surprise I did not only won as a Site of the Day but also the Developer award. A reason for much satisfaction and pride, and I certainly could not without the support, help of this incredible community, who always welcomes and helps everyone who comes here to seek a light for their goal. So thank you to all of you and as a form of gratitude and recognition I made a point of mentioning in the thanksgiving session of my website (http://victor.work) on the page about, because it is also conquest of you. (and also mentioned GSAP FORUM in my hobbies) So through all this I would like to let you know that you provide a very important role for the web community, a tool that we can evaluate as perfect and yet I see you doing the best and working hard to perfect it even more. Guys you are very importants. I'll leave the recognition link here at Awwwards: https://www.awwwards.com/sites/victor-work-folio19 Anyway, this is it: Thank you very much indeed, you guys are awesome.
  5. Hi @tagger, try this: var midi_tl; function ff() { document.getElementById("__midi").setAttribute("fan","1"); midi_tl = new TimelineMax({paused: "true"}); midi_tl.set(document.getElementById("__midi"),{fan:"1",width:100}) midi_tl.play(); console.log(document.getElementById("__midi").getAttribute("fan")) }
  6. Victor Work

    wave on image

    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.
  7. 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. ?
  8. 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.
  9. 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
  10. 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?
  11. 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.
  12. 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:
  13. @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):
  14. 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. ?
  15. 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.
  16. 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. ?
  17. 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!
  18. 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
  19. 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:
  20. 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?
  21. 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.
  22. 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.
  23. 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.
  24. 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
  25. 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.