Zoom In after scroll (help)

[ThatCat]

Hi there!

I’m searching a script for make animations’ like http://adayinbigdata.com/, like the zoom in after scroll down. I think in use “Animate.css” and this script: http://codepen.io/dganoff/pen/jtvay

But idk how to implement… Anyone can help me with this?

Thanks!

[nixnerd]

This question DOMINATES this forum section. We get this question almost daily.

Here is what you want:

http://janpaepke.github.io/ScrollMagic/

It can do much more than “zoom in.” It can do almost anything under the sun upon scroll.

[ThatCat]

Thanks, Nix.

I’m new here, I don’t know what are the most asked questions x)
But, the effects in that site are not like the example I post ( http://adayinbigdata.com/ )

I am interested in the way in which the circles with images and text appear in the section “WHY IS IT BECOMING IMPORTANT NOW?“, I imagine that will DIVs with JS or CSS applied. It seems that is 1 to 1.

[nixnerd]

I don’t know what are the most asked questions

That’s what the search bar is there for.

But, the effects in that site are not like the example

Right… you add that part. All ScrollMagic does is make things happen when you scroll to a certain point. Then, you cause it to do whatever it is you want. In this case… looks like a simple scale/opacity animation. Nothing more. Pretty simple.

On another note… did you simultaneously feature and burry my comment?

[nixnerd]

On another note… did you simultaneously feature and burry my comment?

Seems to be fixed but now it appears you’ve burried your own comment?

[ThatCat]

Okay, I think I got it. Later I post my result.

ps: Sorry for click Feature and Bury, I did not know what those buttons hahaha

[nixnerd]

ps: Sorry for click Feature and Bury, I did not know what those buttons hahaha

No problem. Gotta say, I genuinely like your style sir:

Mystery buttons? Oh I’m clicking the hell out of those!!!

[ThatCat]

After all, I could not get the effect I wanted.

[nixnerd]

What? It’s so doable! What happened? Where did it fail?

[ThatCat]

I need make a Adobe Edge Animate composition play when the user scroll to 2nd section in fullPage.js , and I can’t add percentage to JS :(

[nixnerd]

Why Adobe Edge? I use percentages all the time with Scroll Magic. You put them it quotes homie. They’re a string.

[ThatCat]

Why Adobe Edge?

Because I need make an animation. That animation must be start (play) when the user see the respective/corresponding section.

I use percentages all the time with Scroll Magic. You put them it quotes homie. They’re a string.

Like this?

.css( ‘width’, 100 / tabsCount + ‘%’ );

Or what? I’m lost.

[nixnerd]

Alright… so Scroll Magic USES GSAP… but it is not GSAP. So… don’t go on their forums and ask a bunch of stuff about Scroll Magic. Let me address a few things:

Because I need make an animation.

If you want to use Adobe Edge… go right ahead. However. GSAP supports full blown animations and tweening. They’re uber fast and HIGHLY customizable complete with callbacks and full control over play, pause, reverse, etc.

.css( ‘width’, 100 / tabsCount + ‘%’ );

We were just talking about this. It’s probably better to create a CSS class and use GSAP to add the class. That would be the cleaner, more abstracted method. Go to GSAP’s site… play around with the tuts and get familiar with the syntax/isms.

[ThatCat]

I have previously visited the web site “Greensock“, but personally I find it easier to do it in Edge Animate.

So how do I display a div with animation (<object>) when the user scroll -100% (or -200%, or whatever)? That’s what I do not understand.

[nixnerd]

Well… That’s another story because I’m not even sure what Adobe edge outputs. What sort of file/collection of files do you get when it compiles/renders?

[Author]

Posts