CreativeGeek

Hi Rodrigo, Thank you again for the response. So the main difference between using TweenMax and TimelineLite are the classes. And as you explained earlier {var} would be any class, or method that can customize any animation? So for instance, I fixed mine: 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, 20', {strokeDashoffset: 0, ease:Linear.easeNone}) .to('#bullet_1', 2, {delay: 3, autoAlpha: 0, transform: 'translateY(40px)'},0); //zero tells GSAP to place it at the beginning of the timeline .to('#dot_2', 20, {strokeDashoffset: 0,ease:Linear.easeNone}) .to('#bullet_2', 2, {delay: 3, autoAlpha: 0, transform: 'translateY(40px)'}0); .to('#dot_3', 20, {strokeDashoffset: 0,ease:Linear.easeNone}) .to('#bullet_3', 2, {delay: 3, autoAlpha: 0, transform: 'translateY(40px)'}0); .to('#circle_1', 20, {strokeDashoffset: 0, ease:Linear.easeNone}) .to('#circle_2', 20, {strokeDashoffset: 0, ease:Linear.easeNone}) .to('#circle_3', 20, {strokeDashoffset: 0, ease:Linear.easeNone}); It still is not working. I know the code is on the right track. I am not sure if it's a semi-colen? I checked the methods and classes in the docs and they were used. On codepen the svg circles stopped working: http://codepen.io/sarahabogabir/pen/BzAKLL Everything prior was solved, but it seems like once adding: bullet_1, bullet_2, bullet_3 the whole thing stops working. I did watch videos but I think because my effects are different that it may not apply as much as I thought. I hope to get some feedback here. I know I'm close, It just feels like I've been working on this for a month.

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!

But wouldn't the problem be just about how the information fades in and out? I'm not looking to solve the pinning problem, I know that it's scrollmagic. My apologies if it came across as the primary issue. Because all I am trying to do is make sure the three paragraphs fade in and out according to whatever circle they belong to. So we can leave scrollmagic out. I just want to understand why the text is not fading in and out. I hope I explained myself. Thank you again!

Hello Again, It seems that I ran into another small problem. I can't seem to figure out what it is. It is still related to the same code as before, but just adding one more concept. I am not sure if I should make another post. What I am trying to do is to make the first list appear with circle one, so the other two should be hidden, then as you keep scrolling the second circle is turning and the second list is appearing, and so forth. I'm basically trying to swap out the text as I'm scrolling because both items in the container are pinned. The pinning isn't working on codepen but what is most important to me is to get the text to swap in and out according to the circle it belongs to. In sum: -Circle (1) appears with list 1 -Circle 2 appears with list 2 -Circle 3 appears with list 3. In my code you will notice that I decided to include for instance #dot_1 with #bullet_1 in the timeline so each one is paired. It is not throwing me an error so I'm not sure how to pair them up. I tried making a separate timeline but that doesn't seem to work either. Here is my codepen:http://codepen.io/sarahabogabir/pen/BzAKLL Thank you everyone, I seem to be learning a lot from these forums.

Hi everyone thank you so much for answering. How can I adjust the amount of time for each circle? I would like to make them go slower. Thanks!

Hi Mark thank you so much! Also, is there a better way of doing this?

HI there! I am in need of some advice and help! I have worked on this for over 3 weeks and I can't seem to find the solution. I have been using Tweenmax and Scrollmagic in order to make 3 progress circles that fill in a svg path, each loading on different times. I used a drawing path from ScrollMagic and making a timeline so they can load at different times with TweenMax. I have been able to get everything done thus far, the only thing that is holding me behind is how to manipulate the timing for each circle. I tried adding "+=1" to the second and third circle but it didn't work. On my codepen, you will find that all three load, but are not loading at separate times like I want to.I would like the first one to load, then the second circle, and third, each having a time in between. with a nice sequence. A perfect example of what I am trying to replicate (this demo does not use scrollmagic,so just focus on the behavior progress circles to the right) https://codyhouse.co/demo/reading-progress-indicator/how-audiences-reacted-to-the-star-wars.html I hope I can understand what I am doing wrong because I have tried everything. Thank you and looking forward to the feedback!