Thales Ribeiro
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by Thales Ribeiro
-
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?
-
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
-
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
-
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
-
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
-
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
-
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.
-
There's also another error in the console: Uncaught ReferenceError: Timeline is not defined
-
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"); });
-
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
-
Delaying animation from elements from a list
Thales Ribeiro replied to Thales Ribeiro's topic in GSAP
Nice one! thanks mate! -
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
-
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
-
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
-
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
-
Hi Jonathan, thanks for your help. I shortened the code in order to work in CodePen. http://codepen.io/anon/pen/ABvqm What i'm trying to fix is the rollOver state, you will notice that the green panel should always cover the text with a 25px padding. this comes from this variable bgHeight = $(element).find(".text-box").height()+25; The issue is that when you resize the window, you will notice that the green panel will not cover the text properly, but if you refresh the preview area, it will be fine. Let me know if that makes sense. Cheers, Thales
-
Hi, yeah i think what i need is the resize event, the only thing i'm not sure about is the code that would refresh the variables. for example: bgHeight = $(element).find(".text-box").height()+25; The height of the element changes as the window resizes but the variable remains the same. Cheers, Thales
-
Hi there, i'm working on a responsive website right now and the issue i'm having implementing greensock to it is when the user resizes the window and a few values like height/width of elements don't get updated unless user refreshes the browser. I was wondering if there's a way to update a few variables everytime the user resizes the window? Cheers, Thales
