Ηey all! I'm new to this library and i really need some help here.
I'm trying to create a dot menu on the right of the page, which is working pretty fine so far (also using Scrollmagic). The problem is that i want the text of my menu, to fade in for a second or so, and then fade out.
My current code is this:
var controller = new ScrollMagic.Controller();
var timeline = new TimelineLite();
var setMultipleClasses21 = TweenLite.to(('#bt1'), 1, {
className: "fadein"
});
var setMultipleClasses2 = TweenLite.set((['#about_b', '#services_b', '#contact_b']), {
className: "dot name-inactive"
});
var setSingleClass2=TweenLite.set(("#home_b"),{
className: "dot name-active"
});
timeline.add(setMultipleClasses2).add(setSingleClass2).add(setMultipleClasses21);
var ourScene = new ScrollMagic.Scene({
triggerElement:"#h_id"
})
.setTween(timeline)
.setClassToggle('#h_id', 'fade-out')
.addTo(controller);
/*----------------------------------------*/
var timeline = new TimelineLite();
var setMultipleClasses01 = TweenLite.to(('#bt2'), 1, {
className: "fadein"
});
// Create a .set() tween to add "red and bold" classes
var setMultipleClasses0 = TweenLite.set((['#home_b', '#services_b', '#contact_b']), {
className: "dot name-inactive"
});
var setSingleClass0=TweenLite.set($("#about_b"),{
className: "dot name-active"
});
timeline.add(setMultipleClasses0).add(setSingleClass0);
var ourScene = new ScrollMagic.Scene({
triggerElement:'#about',
triggerHook: 'onCenter'
})
.setTween(timeline)
.setClassToggle('#about', 'fade-in')
.addTo(controller);
/*----------------------------------------*/
var timeline = new TimelineLite();
var setMultipleClasses11 = TweenLite.to(('#bt3'), 1, {
className: "fadein"
});
var setMultipleClasses1 = TweenLite.set((['#home_b', '#about_b', '#contact_b']), {
className: "dot name-inactive"
});
var setSingleClass1=TweenLite.set(("#services_b"),{
className: "dot name-active"
});
timeline.add(setMultipleClasses1).add(setSingleClass1);
var ourScene = new ScrollMagic.Scene({
triggerElement:'#s_id',
triggerHook: "onCenter"
})
.setTween(timeline)
.setClassToggle('#s_id', 'fade-out')
.addTo(controller);
/*----------------------------------------*/
var timeline = new TimelineLite();
var setMultipleClasses31 = TweenLite.to(('#bt4'), 1, {
className: "fadein"
});
var setMultipleClasses3 = TweenLite.set($(['#home_b', '#services_b', '#about_b']), {
className: "dot name-inactive"
});
var setSingleClass3=TweenLite.set($("#contact_b"),{
className: "dot name-active"
});
timeline.add(setMultipleClasses3).add(setSingleClass3);
var ourScene = new ScrollMagic.Scene({
triggerElement:'#c_id'
})
.setTween(timeline)
.setClassToggle('#c_id', 'fade-out')
.addTo(controller);
also my css for the buttons are:
#bt1.fadein, #bt2.fadein, #bt3.fadein, #bt4.fadein{
opacity: 1;
}
#bt1, #bt2, #bt3, #bt4{
opacity: 0;
transition: all 0.2s ease-in;
}
Any help appreciated! Thanks! :)
