Hi Rodrigo,
I understand a lot more now. I started to make a another version, but while doing so I ran into some questions. I googled some of them but they still did not offer a good enough answer.
(1) On codepen I used a TimelineMax and TweenMax within the timeline. With the order that you suggested using TimelineLite, how does that differ?
(2) Before I was using .add( ) and with your suggestion I instead started using .to( ) How do these differ? I read online that they are basically the same but the answer still did not justify.
So this was my code before:
// preparevar $dot_1 = $("path#dot_1");
var $dot_2 = $("path#dot_2");
var $dot_3 = $("path#dot_3");
var $circle_1 = $("#circle_1");
var $circle_2 = $("#circle_2");
var $circle_3 = $("#circle_3");
var $bullet_1 = $("#bullet_1");
var $bullet_2 = $("#bullet_2");
var $bullet_3 = $("#bullet_3");
// build tween
var circle_tween = new TimelineMax()
.add(TweenMax.to(
'#dot_1, #bullet_1', 20, {
strokeDashoffset: 0,
ease:Linear.easeNone
}
))
.add(TweenMax.to(
'#dot_2, #bullet_2', 20, {
strokeDashoffset: 0,
ease:Linear.easeNone
}
))
.add(TweenMax.to(
'#dot_3, #bullet_3', 20, {
strokeDashoffset: 0,
ease:Linear.easeNone
}
))
.add(TweenMax.to(
'#circle_1', 20, {
strokeDashoffset: 0,
ease:Linear.easeNone
},
"+=2")
)
.add(TweenMax.to(
'#circle_2', 20, {
strokeDashoffset: 0,
ease:Linear.easeNone
},
"+=2")
)
.add(TweenMax.to(
'#circle_3', 20, {
strokeDashoffset: 0,
ease:Linear.easeNone
},
"+=2")
)
.add(TweenMax.to(
"path", 20, {
stroke:"#ffffff",
ease:Linear.easeNone
}))
After editing and looking at some of the videos this is what I came up with ( I haven' tested on codepen yet)
// prepare
var $dot_1 = $("path#dot_1");
var $dot_2 = $("path#dot_2");
var $dot_3 = $("path#dot_3");
var $circle_1 = $("#circle_1");
var $circle_2 = $("#circle_2");
var $circle_3 = $("#circle_3");
var $bullet_1 = $("#bullet_1");
var $bullet_2 = $("#bullet_2");
var $bullet_3 = $("#bullet_3");
var tl = new TimelineLite();
tl.to (#dot_1, 10, {vars})
.to (#bullet_1, 2, {vars},0);
//zero tells GSAP to place it at the beginning of the timeline
.to (#dot_1, 10, {vars})
.to (#bullet_2, 2, {vars}0);
.to (#dot_3, 10, {vars})
.to (#bullet_#3, 2, {vars}0);
.to(circle_1, 10, {vars})
.to(circle_2, 10, {vars})
.to(circle_3, 10, {vars});
-Do I need to add "" for #dot after .to ?
-Also how do I still keep the strokeDashofffset and ease:Linear.easeNone inside the timeline (previous code) ?
Thank you so much! You have been extremely helpful!