• Content Count

  • Joined

  • Last visited

Community Reputation

138 Specialist


About Noturnoo

  • Rank
    Advanced Member

Recent Profile Visitors

958 profile views
  1. Noturnoo

    .set() for a custom attribute is not working

    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}); console.log(document.getElementById("__midi").getAttribute("fan")) }
  2. Noturnoo

    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.
  3. Noturnoo

    Simulating Drag on Event.

    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. 😎
  4. Noturnoo

    Simulating Drag on Event.

    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.
  5. Noturnoo

    Simulating Drag on Event.

    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 ( 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
  6. Noturnoo

    Simulating Drag on Event.

    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?
  7. Noturnoo

    Simulating Drag on Event.

    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.
  8. Noturnoo

    Become better web designer by using GSAP and Pixi

    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:
  9. Noturnoo

    Learning GSAP with no Javascript knowledge/experience

    @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):
  10. Noturnoo

    Trying to replicate menu link animation effect

    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. 😊
  11. Noturnoo

    Learning GSAP with no Javascript knowledge/experience

    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.
  12. Noturnoo

    Trying to replicate menu link animation effect

    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. 😊
  13. Noturnoo

    Learning GSAP with no Javascript knowledge/experience

    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!
  14. Noturnoo

    Learning GSAP with no Javascript knowledge/experience

    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
  15. Noturnoo

    Page transition

    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: