Home › Forums › JavaScript › scrollmagic.js help PLEASE
- This topic is empty.
-
AuthorPosts
-
August 1, 2014 at 7:20 pm #177274nixnerdParticipant
Ahhh found what you’re talking about here:
http://janpaepke.github.io/ScrollMagic/examples/expert/mobile_advanced.html
August 1, 2014 at 7:22 pm #177275nixnerdParticipantHe’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.
August 1, 2014 at 7:23 pm #177276rwchampinParticipantyeah 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
August 1, 2014 at 7:30 pm #177277nixnerdParticipantDo you have SASS + Compass installed?
August 1, 2014 at 7:33 pm #177279rwchampinParticipantthe 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…
August 1, 2014 at 7:57 pm #177281nixnerdParticipantShould be default but try adding this:
scene.triggerHook("onCenter");
August 2, 2014 at 7:52 am #177300rwchampinParticipanthey 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
August 2, 2014 at 7:56 am #177301rwchampinParticipantyeah 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
August 2, 2014 at 9:27 am #177302nixnerdParticipantWell 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.
August 2, 2014 at 1:14 pm #177334rwchampinParticipantok…..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
August 2, 2014 at 1:17 pm #177336nixnerdParticipantThat 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.
February 17, 2016 at 7:16 am #238123SeparatorParticipanthi 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/ZQZGMNso 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.
August 21, 2017 at 12:55 pm #259336gentsParticipantHello 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!
August 21, 2017 at 2:07 pm #259338BeverleyhParticipantI 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
August 21, 2017 at 3:06 pm #259348gentsParticipantHello 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!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.