locateganesh locateganesh - 18 days ago 6
CSS Question

Change HTML element on scroll Magic

scroll Magic is a great tool for animation on scroll.

CSS, GSAP and velocity animation work Great.


But is it possible to change HTML text on scroll.


Fiddle Demo

on scroll circular radius is moving and in the same time. I want to change 1 number should count 2 and 3 and 'year' should become years on 2 and 3 number. It should be like preloader on scroll.

This is possible By CSS show and hide but I want to do this with HTML in scrollMagic. Just wondering is it possible.

Code has to be there with fiddle that's why putting it.

var controller = new ScrollMagic.Controller();
var yearChange = new TimelineMax()
.fromTo(".year-loader", 1, {rotation:'0'}, {rotation:'720', ease: Linear.ease});
var yearCount = new ScrollMagic.Scene({
triggerElement:'#section',
triggerHook:0,
duration:'200%'
})
.setTween(yearChange)
.setPin('.yearCounter', {pushFollowers: false})
.addTo(controller);

Answer

Sorry, I didn't go in detail in scrollMagic API. That's a option to change HTML.

onStart: function () {$tText.html("2"); $year.html("years")}

Solve Fiddle Link