Jump to content
Search Community

brightpixels

Members

  • Posts

    17

  • Joined

  • Last visited

 Content Type 

Posts posted by brightpixels

    Working with SVGs and external content/"use" tag

    in GSAP

    Posted

    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>

     

    Is it possible to add to timeline tween a parameter, to create a new label, as well as, a position parameter

    in GSAP

    Posted

    @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.

     

    Is it possible to add to timeline tween a parameter, to create a new label, as well as, a position parameter

    in GSAP

    Posted

    I have completed the "position" challenge: 

    See the Pen veMbEQ by codeload (@codeload) on CodePen

     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");

     

    How to stop/kill existing tween before starting new one

    in GSAP

    Posted

    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

     

    Quickly jumping between different timeline animation on same elements causing overlaps in animation (demo code included)

    in GSAP

    Posted

    Hi Mikel, 

    That's not an option for me, because I still want the number labels (".chart-number") to fade in, when the yellow line reaches the middle position. Also, when the line is moving away from the middle position, I want the number labels to fadeout first, then for the yellow line to move. If I follow your instructions, then everything plays at the same time.

    Quickly jumping between different timeline animation on same elements causing overlaps in animation (demo code included)

    in GSAP

    Posted

    https://jsfiddle.net/BrightPixels/xtoemsxf/

     

     

    I have a set of buttons that trigger their own timeline animations on the same elements. Two related issues am having (detailed in the demo) is around how these different timeline animation interact (this is very simplified to help to debug issue). Am new to GSAP and the way am doing this may not be the best so would appreciate any better suggestions

    See the Pen by BrightPixels (@BrightPixels) on CodePen

×
×
  • Create New...