Forums

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

Home Forums JavaScript scrollmagic.js help PLEASE

  • This topic is empty.
Viewing 15 posts - 16 through 30 (of 30 total)
  • Author
    Posts
  • #177274
    nixnerd
    Participant
    #177275
    nixnerd
    Participant

    He’s saying that you only use the container method IF you’re going for basic mobile support. If you want it all smooth and sexy, just link the iScroll js file. That’s how I’m reading it.

    #177276
    rwchampin
    Participant

    yeah iScroll….but we i can figure that out….i tried transferring the code from codepen to my local site and it all of a sudden wont work and yes the javascript files are correctly linked….i have a duration set so the animation is fired when it hits the trigger point and uses pixels to animate the element….i swear i feel like ive never done JS before this thing just wont work for me…i dont know y i transferred the code exactly and testing it locally it doesnt work now

    #177277
    nixnerd
    Participant

    Do you have SASS + Compass installed?

    #177279
    rwchampin
    Participant

    the finger element is in the middle of the screen still but its as if the actual element triggering the animation is wayyyyy down the page bc when i scroll into view…the animation has already happened…

    #177281
    nixnerd
    Participant

    Should be default but try adding this:

    scene.triggerHook("onCenter");

    #177300
    rwchampin
    Participant

    hey sry NIX…i got reallly fed up with this last night n gave up for the night…..i still cant get this thing working….its so weird….i know abt setting the hook to onCenter but i swear whats happening is were setting the body height to some number….lets say 3000px…..the browser is putting the finger or trigger at 1500px instead of 50% of the window….also…im dying with making this work for mobile…the example looks so easy but its just not working lol

    #177301
    rwchampin
    Participant

    yeah i just confirmed that when the height on the body is set to higher than 1800px….the onCenter trigger isnt in the center of the screen anymore…its way lower….i just dont know how to fix this …..the finger line is still 50% of the browser window…its just the animation is being applied way too early

    #177302
    nixnerd
    Participant

    Well yeah. When you sent something… anything to 50%, it’s relative to the PARENT element. So, if the body is set to 3000px, the trigger would be at 1500px if set to 50%. But still, the animation SHOULD NOT happen until the trigger is in the middle if the screen. Whether it’s 80px or 8000px down.

    BTW, when your project is done, body wont have a height set. It will just be what it is depending on what elements are in it.

    Also, the finger element is only for debugging. If we delete it…. the animation will work exactly the same.

    #177334
    rwchampin
    Participant

    ok…..i got everything set up and figured out all the little bugs and such….now…i even figured out mobile and got it working. Now, im just trying to figure out how to chain animations on the same element….not autorun animations tho…the scroll based animation

    #177336
    nixnerd
    Participant

    That you will absolutely need timelineLite or timelineMax for. That’s how you chain.

    This is best understood if you read the GSAP docs or go through their tutorial here:

    http://www.greensock.com/gsap-js/

    Please remember that GSAP and ScrollMagic have no affiliation at all. ScrollMagic just uses GSAP for tweens. But, the GSAP syntax is quite easy to understand once you view their examples.

    #238123
    Separator
    Participant

    hi nixnerd,
    i see u givin so good explaination about scrollmagic and u know it very well.
    i have a question which might be very easy for u but i cant figure out how to make it work.
    this is my codepen link: http://codepen.io/Separator/pen/ZQZGMN

    so i want the book pages to go back to the starting position when i scroll back to the begining of the page. basiclly i want the animation to go back to the starting point and stop like if the page was reloaded so the book look normal and the pages in their normal position and not frozen like they do now.

    #259336
    gents
    Participant

    Hello nixnerd,

    If at all possible, I could really use your help! I’m very new at site building & I can’t even get pass the ScrollMagic setup & initial test tween. If you or anyone else can help, I would certainly appreciate it!

    I just want the background in the div to transition from one color to another when triggered. I’ve just started using jquery/js.

    https://codepen.io/gents/pen/prVJVJ

    Thanks in advance!

    #259338
    Beverleyh
    Participant

    I just want the background in the div to transition from one color to another when triggered.

    I haven’t read the whole thread — you might want to start your own so it doesn’t get mixed up with older discussions — but based on the above description alone, might this help? http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm

    It’s the version 3 demo from this article http://blog.fofwebdesign.co.uk/41-add-classes-to-an-element-when-scrolled-into-viewport

    #259348
    gents
    Participant

    Hello BeverleyH!

    I appreciate the reference and have bookmarked it. It does help…Thanks!

    I’m hoping to get ScrollMagic set up as well, but in my inexperience I’m having trouble.

    Grateful for any help rendered!

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