hellol11
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by hellol11
-
-
The animations in animate.css are pretty cool, I hope this goes well.
-
The reason you are getting a syntax error is because none is being treated as a variable, when it's supposed to be a string, or a variable with a string. Again, autoAlpha is useful here.
- 1
-
Are you using the callbacks fullpage.js supplies. If not refer to the documentation there are callbacks supplied where you place events that you want to trigger linked to scrolling through sections and slides.
If you are using the callbacks make sure you are using adequate specificity in your selectors to make sure that your scripts are running on items only contained within the slide/section you are targeting. ie if you simply select items on the dom the scripts will run your animation the first time or every time you scroll and the callbacks are invoked, regardless of whether the items are in the section you are scrolled to, selectors have to target the section you are in and the dom element you want to fire the event on.
fullpage.js only gives sections, it doesn't do anything as far as callbacks.
-
@ohem thanks for the tip! Never knew that was a property that you could change.
-
Step 1: attach a "scroll" event to the document
Step 2: when the event is fired, check window.scrollY. If it aligns with one of the sections, proceed to step 3
Step 3: fire desired animation(s)
-
The lower the perspective value is, the more dramatic the FOV becomes. Basically, if perspective is high enough, it may as well be 0.
-
Cool!
- 1
-
So, here is an idea:
Let's say I have an element that I want to have animated with different eases for the x and y props. Normally, to do that, I would have to do this:
TweenMax.to("#box", 1, { x:200, ease:Power4.easeOut }); TweenMax.to("#box", 1, { y:200, ease:Power4.easeIn });
But, what if I could do it like this instead:
TweenMax.to("#box", 1, { x:{ value:200, ease:Power4.easeOut }, y:{ value:200, ease:Power4.easeIn } });
I think that would be a pretty cool thing to have. Can you guys make this happen?
-
I wish bounce were a configurable ease. could be really useful that way.
-
Hi,
I believe that the issue is on your jquery code. My impression is that you're kind of over-complicating the code. Is simpler like this:
var listItems = $("#list li"); listItems.each(function(i,e){ var t = TweenLite.to(e, 0.5, {fontSize:30, paused:true}); e.fontTween = t; $(e).hover(function(){ e.fontTween.play(); },function(){ e.fontTween.reverse(); }); });
This is really interesting. I am new to jquery, so this is some new code to me.
-
As you can see in the attached codepen, I want to make a small hover effect. after looking through some docs on both Jquery and GSAP, it still is not working. Is there something I'm doing wrong?
See the Pen NNzzYo?editors=1010 by hellol11 (@hellol11) on CodePen
-
So, I have a small problem. I want to be able to customize things in the throwprops plugin, like friction and bounciness. But it doesn't let you do anything like that, so I wondered, is it possible to combine the functionality of the two plugins?
-
I want to make a small animation just for fun, but as I make it, I notice it doesn't play. Can someone please help me?
See the Pen zqEwoM?editors=0010 by hellol11 (@hellol11) on CodePen
-
I'm not sure I fully understand what your goal is here ... but if you'd like it to look like it's infinitely scrolling on hover, you'll want to clone the red-box element and attach it to itself and move the width of one red-box on repeat.
See the Pen oxervY?editors=0010 by sgorneau (@sgorneau) on CodePen
I think he wants it to keep scrolling, even after he stops hovering.
-
Is this effect using GSAP?
in GSAP
Posted
Yes, this is built with GSAP. Looking in the source code, they're using a very recent version of TweenMax.