Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Zoom In after scroll (help)

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #179526
    ThatCat
    Participant

    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!

    #179540
    nixnerd
    Participant

    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.

    #179545
    ThatCat
    Participant

    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.

    #179549
    nixnerd
    Participant

    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?

    #179550
    nixnerd
    Participant

    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?

    #179555
    ThatCat
    Participant

    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

    #179574
    nixnerd
    Participant

    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!!!

    #180571
    ThatCat
    Participant

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

    #180632
    nixnerd
    Participant

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

    #180665
    ThatCat
    Participant

    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 :(

    #180671
    nixnerd
    Participant

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

    #180686
    ThatCat
    Participant

    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.

    #180691
    nixnerd
    Participant

    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.

    #180695
    ThatCat
    Participant

    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.

    #180702
    nixnerd
    Participant

    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?

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.