ScrollMagic Setup Help Please!

[gents]

Hello,

If at all possible, I could really use help! I’m very new at site building & I can’t even get pass the ScrollMagic setup & initial test tween.

Overall, I just want to have the ability to trigger animations with scrolling. As simple as the setup instructions seem, I’m obviously setting up & coding something incorrectly. Here’s my CodePen…

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

If anyone can help, I would certainly appreciate it!

[Beverleyh]

Firstly, what’s suppose to happen in the demo?

I just want to have the ability to trigger animations with scrolling.

Next question(s); Are you absolutely sure that you need to use ScrollMagic? What’s you’re understanding of why you need to go down this route? (Might you have stumbled on an old forum thread/tutorial that gives demos/links/the appearance of doing what you want to do, and you’ve opted for that without realising that there are other/newer/lighter ways of doing things?)

My thinking goes like this; ScrollMagic looks like it was released in 2014, which is a time when CSS3 Animations were starting to gain momentum across the web. But the problem back then was with older browsers that didn’t support it, yet still had a prominent market share with the general public (IE8/9, etc). So we used to rely on JavaScript, particularly the jQuery animation engine, to give animation support across the board. But in 2017, browsers have come on in leaps and bounds, and CSS3 Animation is much more prevalent (as are the devices that support it), so we don’t need to rely on JavaScript libraries so much. Consider that your demo is using 5 external JavaScript files, weighing in at ~330kb … that’s a third of a MB that you’ll be imposing on your visitors when you might not need to at all.

You said in your other post (the reply to a thread started in 2014) that you just wanted to transition (fade?) background colours into one another based on the scroll position of a trigger element. You can do this very simply with a snippet of JavaScript to watch/detect scroll position of a trigger-element, and CSS to add/remove a class that in turn applies an animation. And you can do all this with a few kbs of code.

To round off, if you can explain to us exactly what you’re trying to achieve, we will be better placed to offer more support, suggestions and advice on how best to go about doing it.

[Beverleyh]

Drat! I replied to this thread and (over)edited it… the forum has mistaken it for a delicious snack to nyomp on. @Paulie_D, @Senff (or any other helpful moderators currently on the prowl) please can you release it from the mod queue?

[Paulie_D]

@Beverleyh Hope I found the right one..

[Beverleyh]

Yes, that’s great – thank you :)

[gents]

Good day Beverlyh!

You don’t know how grateful I am for your time & reasoning.

You’re right, it seems that it’s best that I bypass ScrollMagic. Your summary of online developments over the past few years is insightful, especially for a new one like me.

I don’t have a specific task in mind – just yet. I was just generally trying to understand the method of triggering any animation by scroll position. So, your explanation of JavaScript & CSS – & the link you provided below seems to be exactly what I need. I’m perusing the site now. You’re great!

Most appreciative of your help!

http://fofwebdesign.co.uk/template/_testing/scroll-in-view/add-class-to-target-when-trigger-in-view-reduced.htm

[Beverleyh]

No problem – glad to help :)

[Author]

Posts