Jump to content

Victor Work

  • Posts

  • Joined

  • Last visited

Posts posted by Victor Work

  1. On 1/25/2019 at 5:01 PM, GreenSock said:

    Wow, you win the "most encouraging post of the day", @Victor Work! Very nice work indeed. And I love hearing about how our forums (and GSAP) played a small part in your success. Coming from Muse and not knowing HTML/CSS two years ago...you've come a long way indeed! I hope you'll stick around and keep helping others in the forums, as we need more folks like you who understand what it's like to be intimidated at first and then bring yourself all the way to being a recognized expert. In my experience, guys like you have an empathy that comes across in your answers which is much different than other communities where "experts" seems to belittle people with less knowledge. I love how our forums have such a different flavor (friendlier). 


    Congrats on the recognition and success! [high-five]


    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] ?




    On 1/25/2019 at 6:05 PM, elegantseagulls said:

    @Victor WorkCongrats! Beautiful site!

    @elegantseagulls Very Thanks ^^




    On 1/25/2019 at 6:07 PM, Carl said:

    Congrats on the awards. It's really cool to see how much you have learned and applied to your work. Thanks for the nice post I'm sure the folks who have helped you along the way will appreciate it.

    I believe that success is in recognition, and I want to acknowledge everyone who helps me.
    Thank you for the words



    @mikel Thanks Broo.  ☺️



    On 1/25/2019 at 8:08 PM, Dipscom said:

    Well done, mate. Don't downplay your own efforts and diligence.


    Muito sucesso e parabéns pela conquista.


    Thank you very much, I will not go any further.

    E muito sucesso para nois. sempre! hahahha

    • Like 2
  2. 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:

    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:

    Anyway, this is it:
    Thank you very much indeed, you guys are awesome.

    • Like 11
  3. Hi @tagger

    try this:


    var midi_tl;
    function ff()
      midi_tl = new TimelineMax({paused: "true"});


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

    • Like 4
  5. 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. ?

    • Like 2
  6. 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.

    See the Pen ebzdEL by Noturnoo (@Noturnoo) on CodePen


  7. 1 hour ago, OSUblake said:

    Draggable is just translating an element, which is what my demo is doing. If you're trying to do wheel scrolling and dragging on the same elements, it's going to require a little work.

    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

  8. 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(). 


    Is there a way?

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

    See the Pen MQyyze by Noturnoo (@Noturnoo) on CodePen


    • Like 3
  10. 15 hours ago, PointC said:

    Yeah - great job @Noturnoo. It's good to see you jumping into the forum more. :)


    Getting to 1,000 likes is tough when you're up against @Sahil. You'll have to type really fast to beat him.  I'm not sure, but I'm guessing he types about this fast when he sees a new question on the forum.




    @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):


    • Haha 4
  11. 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 ?


    Happy tweening!

    • Like 6
  12. 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

    • Like 7
  13. 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()
     // or
    let tl = new TimelineMax();

    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:

    See the Pen bQPBvQ by Noturnoo (@Noturnoo) on CodePen


    • Like 6
    • Thanks 1
  14. 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.

    • Like 1
  15. 1 hour ago, jeb said:

    but I want to trigger another TimelineMax() animation when each slide comes into full view, but I am having trouble figuring it out. 


    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:

    But really if you have a Pen, it's easier to find a way to help you.



    • Like 2
  16. 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:

    See the Pen QJoyvz by Noturnoo (@Noturnoo) on CodePen

    Bonus: I put an opacity system in the dots to know which one is active.

    • Like 5
    • Thanks 1
  17. 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})
    I hope this helps you. Any questions just ask.
    • Like 7