brightpixels

Thanks guys

I have got inline SVGs, which I have animating with GSAP. Today, I was asked, for reasons I don't fully understand, to implement SVG sprites technique by combing SVG content into a single external SVG and referencing chunks on the SVG with the <use> tag (read more here about this technique https://css-tricks.com/svg-use-external-source/). Issue I have now, is that GSAP can't target any elements that exist in the external svg file. I understand this is due to how DOM works and the fact GSAP or even CSS have no access to any other DOM. My question: what options do I have? If this is a bad idea, if so, why is it? Blake mentioned https://greensock.com/forums/topic/16889-target-class-inside-svg-sprite-sheet-inside-loop/ here about performance might be an issue but didn't go into detail (anything to help me push back on this and stick with inline SVG will be useful). Example code <!-- Main file --> <svg xmlns="http://www.w3.org/2000/svg" width="54" height="54" viewBox="0 0 54 54"> <use xlink:href="img/svg-assets.svg#mainshape"/> </svg> <!-- External svg file--> <svg xmlns="http://www.w3.org/2000/svg"> <symbol id="mainshape"> <circle cx="27" cy="27" r="25" fill="#293741" fill-opacity=".75" stroke-width="4"/> <text fill="#FFF" font-family="SourceSansPro-Semibold, Source Sans Pro" font-size="20" font-weight="500"> <tspan x="24.18" y="38">Title</tspan> </text> <text fill="#FFF" font-family="SourceSansPro-Regular, Source Sans Pro" font-size="9"> <tspan x="19.058" y="21">Subtitle</tspan> </text> </symbol> </svg>

Makes sense. Thank you both

@PointC I don't think you understood my question so let me try again please see my comment against the code lines .to(car, carLiftDuration, {y:"-=160"}, "liftOff") // Tween to start moving car up. Also, this creates a new label called "liftoff". Is it possible to add a delay/offset to this newly created label??? .to(lift, carLiftDuration, {y:"-=160"}, "liftOff"); // Tween to move the lift up at same time as label "liftoff", which should result both objects to go up same time I understand how to create labels with the "tl.add('liftOff')" and how to add an offset/delay with this syntax like this ".add('liftOff", "+=5')". I wanted to see if a delay/offset could be added when creating a new label on a tween code line Btw, for your code snippet in your last reply, I would need to add the offset to the last line as well to ensure both object go up same time.

I have completed the "position" challenge: https://codepen.io/codeload/pen/veMbEQ and it works as expected. However, there is something I tried initially and am trying to understand/confirm why it doesn't work. Is it possible to create a label and specify a position parameters at the same time on a timeline tween, as am doing below? var carLiftDuration = 2; tl.to(car, 2, {x:445}) .to(man, 1, {x:-150}, "-=1") .to(car, carLiftDuration, {y:"-=160"}, "liftOff", "+=1") // Create a new label, as well as, offsetting this tween .to(lift, carLiftDuration, {y:"-=160"}, "liftOff");

See basic codepen (https://codepen.io/codeload/pen/EwdjKV) hit the "Reveal list" many times rapidly. The repeated tween will eventually create a mess of the list. How to best to deal with this? No real use case for this. In real world scenario, I could just hide the button after the initial click. Am just testing various scenarios.

Just did quick test, and indeed, TweenMax.killTweensOf, does the job. Thank you

Thanks Carl (and ignore previous reply). I have a feeling KillTweensOf, which I wasn't aware of, is what I need. Will go through your suggestions, and if they still don't work, I will provide a more simple codepen. Thanks again.

Hello, I am relatively new to Greensock and struggling to fix a particular issue am experiencing with timelines. I have built a single web page using scrollify (jquery plugin) to smooth-scroll between "sections", initially with no Greensock animation (apart from section 3 to navigate between the chart options): [web page no longer available] (responsive design in action so please make sure to view with min 1024px wide screen and 661px high screen). Now, the next challenge is to animate elements (mainly the big circles) across sections, whenever you navigate between them, as follows: If going forward to the next section, tween animate If going forward but not in order, or reveseing (regadless in order or not), no animation all. This is the vision from design: [web page no longer available] (prototype animates both forward and reverse but requirement is just for forward I have made a start up till section 3: [web page no longer available] which works well, ONLY if you allow animation to finish, before moving again. For example: go from section 1 to section 2 and back to section 1; once slowly and another time very quickly to see the difference. Another example, go from 1 to 2 to 3, once slowly enough to allow animation to complete, and another time very quickly and stop at section 3 to see how it break down. NOTE: GS animation is only avialable from min 1024px wide and min 661px high. My approach: Scrollify gives a "before" hook whenever you scroll or jump to a new section, which allows me to call a function, let's call it animateSection() to execute before section scrolls In this animateSection() function, am declaring a series of timelines. For example: I created a timeline "tl1" which is for going section-1-to-2, which looks like this if (currentSection === 1 && prevSection === 0) { // Going forward from 1 to 2 /* Lots of "set"s to prepare elements to be in the right state for animation */ tl1.set(".fund-circles.fund-circles--overlapping svg:nth-child(1)", {css: {position: "fixed", top: "50%", left: "50%", xPercent:-50, yPercent:-50, x:-300}}); tl1.set(".fund-circles.fund-circles--overlapping svg:nth-child(2)", {css: {position: "fixed", top: "50%", left: "50%", xPercent:-50, yPercent:-50, x:-150}}); tl1.set(".fund-circles.fund-circles--overlapping svg:nth-child(3)", {css: {position: "fixed", top: "50%", left: "50%", xPercent:-50, yPercent:-50, x: 0}}); /* .. and so on ... */ /* followed by the animation straight after */ tl1.to(".slide--introduction .slide-title", 0.5, {css: {opacity: 0, y:"-=300"}}); tl1.to(".slide--introduction h2", 0.5, {css: {opacity: 0}}, "-=0.5"); tl1.to(".slide--introduction p", 0.5, {css: {opacity: 0}}, "-=0.5"); /* .. and so on ... */ } If I know, you are going navigating to a previous section, no animation occurs but lots of "set" statements to clear inline styles TweenMax.set([".slide-title, .fund-circles--overlapping svg, .slide--introduction h2, .slide--introduction p, .fund-circles.fund-circles--overlapping text"], {clearProps:"all"}); TweenMax.set(".circle-list.circle-list--desktop-diagram", {clearProps:"all"}); So my question, how to stop a previous running timeline from animating and act upon the new timeline that has been triggered. Thanks

Just following up on this question, is this possible to set yet or do I do it at individual tweens within the timeline.

@OSUblake @Jack: thank you both and really appreciate your time. This resolved my question and going to spend a bit of time to understand the difference between all these properties.

@Jack that's what I was looking for. I didn't explain myself properly. What about this scenario: Center of window (which your answer achieves) but shift down to by, let's say 10px?

If you want to position the element vertically centre for example, you normally do this: left: 50%; top: 50%; transform: translateY(-50%);

TweenMax.set(".div:nth-child(1)", {css: {top: "50%", left: "50%", transform:"translateY(-50%)"}}); css > transform > translateY seems to only work with pixel values and not percentages. Is this correct?

@mikel and @Carl - thank you so much. Both sets of answers are helpful and give me much better understanding how to get what I need. Thanks again