Jump to content

Thales Ribeiro

  • Posts

  • Joined

  • Last visited

Contact Methods

Profile Information

  • Gender
  • Location
    Sydney, AU

Recent Profile Visitors

3,828 profile views

Thales Ribeiro's Achievements



  1. I'm trying to use greensock for an animation I have to rotate a number of objects around the mouse. Anybody has any idea on how to use this code and be able to rotate multiple objects around the mouse by just one class?
  2. Hey mate, thanks for your help again. It's working now, is this the best way of doing it then ? I'm just trying to make the transition smooth and somehow organic, not something that the user scrolls and then it takes saconds to animate. I'm having a look at this link you sent, what's this throttle or debounce for? Thanks
  3. Hi there, i'm trying to do one of those animations on the header as you scroll down. I want it to be a very nice and smooth transition. I'm trying to do in such a way that i could easily re-use the code in different projects, just changing the timeline animation. Basically, when you scroll down 50px, an animation would play instantly, at the moment i'm adding a class "sticky" to my header, so i can control the position thru css, but i can't get the animation working. I'm sure there's something missing on my code, just can't figure out what it is. $(function() { var header = $(".header"); $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { header.removeClass('not-sticky').addClass("sticky"); console.log("sticky") } else { header.removeClass("sticky").addClass('not-sticky'); console.log("notsticky") } }); }); var headerAnim = new TimelineLite({}); headerAnim.to(".sticky", 1, {css:{background:'#ccc'}, color:'#fff', ease:Back.easeOut}); //>> animate logo in, etc
  4. Your code looks a lot better than mine! I knew the code i created wasn't the best and easiest way of animating it, but as a designer i just couldn't figure out a way of making a better code. The animation now is a lot smoother and i can see it's simpler to randomise as well. Thanks, Thales
  5. Hi there, i'm trying to replicate an animation i did in After Effects using the Wiggle expression. The problem is that my animation in Greensock is far from looking as 'fluid' as the one i did in after effects. The way i did my animation in after effects i set up how much a value will change and the frequency of this change. for instance: wiggle(freq, amp) wiggle(2, 50); Have a look at the code i created, on the same link you can check out the animated gif i'm trying to replicate. http://codepen.io/anon/pen/qBxir/ The animation is basically a constant wobbly effect on all those icons, i also want the animation to be random. Do you guys see this as a good way of doing this? I tried changing the easing but i still couldn't get it to look close to the gif. Is there a better way of doing this? Cheers, Thales
  6. Yeah i fixed that. there was also a strange thing that i had to change in order to get it working, i had to call my .js at the bottom of the page, after the TweenMax.min.js, is that normal? Cheers, Thales
  7. Hi there, i'm trying to do a basic animation for a button and it's not working when i put my code on my website. Here's the CodePen page(it works here): http://codepen.io/anon/pen/KnfLk When i drop that code in my website i get this: Nothing happens basically, and even the console.info doesn't work.
  8. There's also another error in the console: Uncaught ReferenceError: Timeline is not defined
  9. Hi Rodrigo, that makes sense. thanks for you help! The updated code worked fine in the CodePen, but when i dropped that in my code it doesn't work for some reason. I even put a console.info to check if the .hover was actually working, but it's not. When i delete the animation function it works. Has this ever happened to you? $(".video").each(function(index, element) { var tl = new Timeline({paused:true}); tl.to(element, .5, {opacity:.2, ease:Power2.easeInOut}); tl.to($(element).find("span"), .5, {scale:2, ease:Power2.easeInOut}); element.animation = tl; }) $('a.video').hover( function(){ this.animation.play(); console.info("OVER"); }, function() { this.animation.reverse(); console.info("OUT"); });
  10. Hey guys, i'm trying to do something simple and that i've done before in a similar way, but for some reason it's not working on this project. I'm not sure where am i getting the syntax wrong. I just want to have a timeline to animate the rollover state for the button. Basically i'm going to have an animation for the <a> itself and another one for the span that is inside the <a>. does anybody see the error? http://codepen.io/anon/pen/gAolh Cheers, Thales
  11. Hi there, i'm animating a list of links that slide in. I'd like to add a delay to each of these items, so they dont animate all at the same time. They all should have the same animation, but there should be a couple of frames gap in between them, is it possible to do that with TweenMax? TweenMax.from(".overlay ul li a", 1, {y:-100, ease:Power4.easeOut, delay:.2}); Cheers, Thales
  12. Hi Jonathan, thanks for the example, i can see myself using it for the rest of the animations as well. For some reason i had to use another syntax for the onresize event tho. window.onresize = function(){ mainAnimation(); }; Cheers
  13. Thanks Carl, That's exactly what i needed. Now i just tried to change the code putting the animation for the siblings as a variable that i can play and reverse in the function so it's easier to update the animation. http://codepen.io/anon/pen/ABvqm I'm not sure what the right syntax might be, i've tried these as well: var myTween:TweenLite = new TweenLite(mc, 1, {x:100}); TweenLite.to(mc, 1, {x:100}); var myTween:TweenLite = TweenLite.to(mc, 1, {x:100}); Cheers, Thales
  14. Hi there, I'm animating a few thumbnails for a website, you can check out a quick version i adapted for codepen, so you can see what i'm trying to archive. http://codepen.io/anon/pen/ABvqm What i'd like to add to this, would be an effect on the other thumbnails apart from the one that the user is hovering. For instance, you rollOver on the thumbnail 1, the thumbnail 1 gets its rollover animation alongside with the other fading out for example. I put my animation inside this function, so i'm not sure how to target the other elements. $(".thumb a").each(function(index, element){} Cheers, Thales