Hi,
I'm new at JS and would appreciate if someone could take a look how can i start the animation auto on web page load?
I tried to implement trigger at the end but it did not work.
$(tTog).trigger("click");
I think this is the key part of code:
$(tTog).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('inTo');
if ($(this).hasClass('inTo')) {
fullIn.progress(0);
fullIn.restart();
} else {
fullIn.reverse();
}
});
All code:
var sun = $("#sun_3_"),
cloud1 = $("#cloud1"),
cloud2 = $("#cloud2"),
cloud3 = $("#cloud3"),
gauge = $("#gauge"),
wheel = $("#wheel"),
city = $(".city path"),
tTog = $("#top-toggle"),
sTog = $("#side-toggle"),
bkFar = $("#bk-far"),
bkMid = $("#bk-mid"),
but1 = $("#button1"),
but2 = $("#button2"),
controls = $("#controls path"),
mult = [controls, bkFar, bkMid, city, extras],
body = $("body"),
extras = $(".extras path");
TweenMax.set(wheel, {
transformOrigin: "50% 50%"
});
TweenMax.set(city, {
visibility: "visible"
});
//animation that's repeated for all of the sections
function revolve() {
var tl = new TimelineMax({
repeat1: -1
});
tl.add("begin");
tl.to(sun, 15, {
transformOrigin: "50% 50%",
rotation: 360,
repeat: -1,
ease: Linear.easeNone
}, "begin");
tl.to(cloud1, 10, {
x: -110,
repeat: -1,
yoyo: true,
ease: Linear.easeNone
}, "begin");
tl.to(cloud2, 10, {
x: -70,
repeat: -1,
yoyo: true,
ease: Linear.easeNone
}, "begin");
tl.to(cloud3, 10, {
x: -50,
repeat: -1,
yoyo: true,
ease: Linear.easeNone
}, "begin");
return tl;
}
var repeat = revolve();
//bring it in
function cityIn() {
var tl = new TimelineMax({
paused: true
});
tl.add("in");
tl.from(tTog, 3, {
rotation: -30,
transformOrigin: "50% 100%",
ease: Circ.easeInOut
}, "in");
tl.staggerFrom(city, 0.75, {
y: -50,
scale: 0,
cycle:{
x:[300, 100, 200],
opacity:[0.5, 0.3, 0.2, 0.8],
rotation:[50, 100, 150],
},
transformOrigin: "50% 50%",
ease: Back.easeOut
}, 0.02, "in");
tl.staggerFrom(extras, 2.5, {
x: 300,
scale: 0,
transformOrigin: "50% 50%",
rotation: -30,
ease: Elastic.easeOut
}, 0.1, "in");
tl.from(bkFar, 2.5, {
scaleY: 0,
opacity: 0.7,
transformOrigin: "50% 100%",
ease: Circ.easeOut
}, "in");
tl.from(bkMid, 2.5, {
scaleY: 0,
opacity: 0.7,
transformOrigin: "50% 100%",
ease: Circ.easeOut
}, "in+=1");
tl.from(gauge, 2, {
rotation: 180,
transformOrigin: "50% 50%",
ease: Bounce.easeInOut
}, "in");
tl.from(gauge, 1, {
rotation: 0,
transformOrigin: "50% 50%",
ease: Sine.easeIn
}, "in+=3");
return tl;
}
var fullIn = cityIn();
//side toggle perspective
function perspective() {
var tl = new TimelineMax({
paused: true
});
tl.add("per");
tl.from(sTog, 1, {
rotation: -30,
transformOrigin: "100% 50%",
ease: Circ.easeInOut
}, "per");
tl.to(bkFar, 1, {
y: -30,
scaleY: 0.8,
opacity: 0.4,
transformOrigin: "50% 100%",
ease: Circ.easeInOut
}, "per");
tl.to(bkMid, 1, {
scaleY: 1.6,
transformOrigin: "50% 100%",
ease: Circ.easeInOut
}, "per");
tl.from(gauge, 0.5, {
rotation: 60,
transformOrigin: "50% 50%",
ease: Bounce.easeInOut
}, "per");
tl.from(gauge, 1, {
rotation: 0,
transformOrigin: "50% 50%",
ease: Sine.easeIn
}, "per+=0.5");
return tl;
}
var side = perspective();
//button hue
function hued() {
var ch1 = "hsl(+=110%, +=0%, +=0%)",
tl = new TimelineMax({
paused: true
});
tl.add("hu");
tl.to(mult, 1.25, {
fill: ch1
}, "hu");
tl.from(gauge, 2, {
rotation: "-=70",
transformOrigin: "50% 50%",
ease: Bounce.easeOut
}, "hu");
tl.to(body, 1.25, {
backgroundColor: ch1
}, "hu");
return tl;
}
var hue = hued();
//button saturation
function saturation() {
var ch2 = "hsl(+=5%, +=2%, -=10%)",
tl = new TimelineMax({
paused: true
});
tl.add("sated");
tl.to(body, 1, {
backgroundColor:ch2
}, "sated");
tl.from(gauge, 2, {
rotation: "-=100",
transformOrigin: "50% 50%",
ease: Bounce.easeOut
}, "sated");
tl.to(mult, 2, {
fill:ch2
}, "sated");
return tl;
}
var sat = saturation();
$(document).ready(function() {
Draggable.create(wheel, {
type: "rotation",
bounds: {
minRotation: 0,
maxRotation: 360
},
onDrag: function() {
fullIn.progress((this.rotation)/360 );
fullIn.pause();
}
});
$(tTog).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('inTo');
if ($(this).hasClass('inTo')) {
fullIn.progress(0);
fullIn.restart();
} else {
fullIn.reverse();
}
});
$(sTog).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('s-pers');
if ($(this).hasClass('s-pers')) {
side.restart();
} else {
side.reverse();
}
});
$(but1).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('a-s');
if ($(this).hasClass('a-s')) {
sat.restart();
} else {
sat.reverse();
}
});
$(but2).on('click', function(e) {
e.preventDefault();
$(this).toggleClass('a-h');
if ($(this).hasClass('a-h')) {
hue.restart();
} else {
hue.reverse();
}
});
});