Huge SVG Animation (Github embed) - CSS/JS not working

Design help Custom code
1

Hi guys,

Trying to embed my SVG animation (13k chars) - https://codepen.io/smallio/pen/ppYOLm?editors=0010

Following @samliew’s guides

Up to the point where it’s appearing, however the javascript/css isn’t effecting it. What can I do to change this?

You can find the html embed (called mainLoader) in the emmaLoader div.

Here’s the site:
Preview - Webflow
Live - http://emma-dodi.webflow.io/

@samliew I’d imagine you might know?

Thanks,
Will

https://preview.webflow.com/preview/emma-dodi?preview=3b2674bca8d4db06d4969a2d511f9a44

2

You forgot to mention where to look for this on your site.

3

@samliew

Whoops!

emmaLoader —> mainLoader

mainLoader is the Embed

4

You have an error in your console. I’m guessing it’s because you are trying to run some animation JavaScript on the svg that was still loading halfway. You should put everything related to the external html page inside the load function, after $('#ajaxContent').append(data);

5

@samliew Thanks for the reply mate!

So separate files… CSS then JS?

6

No, I don’t understand you.

Everything in the script block which contains a /* MASTER TIMELINE */ should go into your load ready function, because it seems to require your svg to be loaded first.

7

Okay I think I get what you mean.

Can you have another look please? Giving me another syntax error from brackets. Also saying it’s deferred a css file. Stuck :frowning:

8

Fixed those issues, now it does not like the variables… Do they need to go outside?

9

Screenshot_2018-01-24_110143

1 Like
10

Lol sorry you must have looked when I was restarting from your example!

I’ve tried over and over to do this & I’m not getting anywhere :frowning:

var Webflow = Webflow || [];
Webflow.push(function() {
$.get('https://cdn.rawgit.com/smallio/97630a802bbf27b96267124307becbcc/raw/be64eb2bc5d8e03054d6dade733351412c794f85/emmaMainLoader.html', function(data) {
  $('#ajaxContent').master.add(myTimeline);

  });
});

Or Like this maybe?

var Webflow = Webflow || [];
Webflow.push(function() {
$.get('https://cdn.rawgit.com/smallio/97630a802bbf27b96267124307becbcc/raw/be64eb2bc5d8e03054d6dade733351412c794f85/emmaMainLoader.html', function(data) {
  $('#ajaxContent').append(*something goes here????*);

  });
});

Is there anyway you can show me what exact code I need to move and where to put it so I can learn from it and see where I’m going wrong? Sorry for the confusion, just trying to figure it out :slight_smile:

11

Add a new line after the above, and move this into that position

/* Letter Variables */
var E = $("#E");
var M = $("#M");
var M2 = $("#M2");
var A = $("#A");

var D = $("#D");
var O = $("#O");
var D2 = $("#D2");
var I = $("#I");

var C = $("#C");
var A2 = $("#A2");
var K = $("#K");
var E2 = $("#E2");
var S = $("#S");

var L = $("#L");
var O2 = $("#O2");
var N = $("#N");
var D3 = $("#D3");
var O3 = $("#O3");
var N2 = $("#N2");

/* Logo Variables */
var Squiggle = $("#Emma_Squiggle");
var dotLeft = $("#dotLeft");
var dotRight = $("#dotRight");
var Outer_Rim = $("#Outer_Rim");
var Black_Circle = $("#Black_Circle");
var BlackCirc = $("#BlackCirc");
var BlackCirc2 = $("#BlackCirc2");
var Dotted_Rim = $("#Dotted_Rim");
var bgcirc = $(".bgcirc");
var countUp = $(".count-up");

/* Constants */
const wave = document.querySelector("#wave");
const logo = document.querySelector(".logo");

/* SVG Shape Morph Stages */
const shape1 =
    "M469.539032,263.986786H-0.000001L0,263.557617c66.11113,0.429169,351.088104,0.429169,469.539032,0.208344V263.986786z";
const shape2 =
    "M469.539032,263.986786H-0.000001L0,229.890961c310.649475,58.156982,255.61113-98.5,469.539032-65.062302V263.986786z";
const shape3 =
    "M469.539032,263.986786H-0.000001L0,0c226.11113,0,182.887283-0.414484,469.539032,0V263.986786zz";

/*************** Load Counter  ***************/

function countItUp(numb, interval) {
    var secondsLabel = document.querySelector(".js-count-up");
    var totalSeconds = 0;

    // If you want to use either a given param or a default value
    var intrvl = interval || 25;

    var countdown = setInterval(function() {
        totalSeconds++;
        secondsLabel.innerHTML = totalSeconds;

        if (totalSeconds >= numb) {
            clearInterval(countdown);
        }
    }, intrvl);
}

/* myTimeline | Logo/Text/Counter */
function myTimeline() {
    var tl = new TimelineMax();
    tl.to(wave, 1, { attr: { d: shape2 }, ease: Expo.easeIn });
    tl.to(wave, 1, { attr: { d: shape3 }, ease: Expo.easeOut });
    tl.to(wave, 1, { ease: Expo.easeOut, opacity: 1 });

    /*** CALL FUNCTION WITH THE TWEEN BELOW ***/
    tl.from(countUp, 0.6, {
        opacity: 0,
        ease: Expo.easeOut,
        onStart: countItUp,
        onStartParams: [100, 15]
    });

    /* Logo Timeline */
    tl.from(logo, 0.3, { ease: Expo.easeOut, y: 150 }, "-=1.9");
    tl.fromTo(Black_Circle, 1, { fill: "#111" }, { fill: "#3d3d3d" }, "-=1.7");
    tl.fromTo(BlackCirc, 1, { fill: "#111" }, { fill: "#3d3d3d" }, "-=1.7");
    tl.fromTo(BlackCirc2, 1, { fill: "#111" }, { fill: "#3d3d3d" }, "-=1.7");
    tl.fromTo(Squiggle, 1, { opacity: 0 }, { opacity: 1 }, "-=1.7");
    tl.fromTo(Dotted_Rim, 1, { opacity: 0 }, { opacity: 1 }, "-=1.7");
    tl.fromTo(Outer_Rim, 1, { opacity: 0 }, { opacity: 1 }, "-=1.7");
    tl.fromTo(
        dotLeft,
        0.7,
        { opacity: 0 },
        { delay: 0.8 },
        { opacity: 1 },
        "-=1.7"
    );
    tl.fromTo(
        dotRight,
        0.7,
        { opacity: 0 },
        { delay: 0.8 },
        { opacity: 1 },
        "-=1.7"
    );

    /* Emma Tweens */
    tl.fromTo(E, 0.7, { opacity: 0 }, { opacity: 1 }, 2.05);
    tl.fromTo(M, 0.7, { opacity: 0 }, { opacity: 1 }, 2.1);
    tl.fromTo(M2, 0.7, { opacity: 0 }, { opacity: 1 }, 2.15);
    tl.fromTo(A, 0.7, { opacity: 0 }, { opacity: 1 }, 2.2);

    /* Dodi Tweens */
    tl.fromTo(D, 0.7, { opacity: 0 }, { opacity: 1 }, 2.25);
    tl.fromTo(O, 0.7, { opacity: 0 }, { opacity: 1 }, 2.3);
    tl.fromTo(D2, 0.7, { opacity: 0 }, { opacity: 1 }, 2.35);
    tl.fromTo(I, 0.7, { opacity: 0 }, { opacity: 1 }, 2.4);

    /* Cakes Tweens */
    tl.fromTo(C, 0.7, { opacity: 0 }, { opacity: 1 }, 2.45);
    tl.fromTo(A2, 0.7, { opacity: 0 }, { opacity: 1 }, 2.5);
    tl.fromTo(K, 0.7, { opacity: 0 }, { opacity: 1 }, 2.55);
    tl.fromTo(E2, 0.7, { opacity: 0 }, { opacity: 1 }, 2.6);
    tl.fromTo(S, 0.7, { opacity: 0 }, { opacity: 1 }, 2.65);

    /* London Tweens */

    tl.fromTo(L, 1, { opacity: 0 }, { opacity: 1 }, 3);
    tl.fromTo(O2, 1, { opacity: 0 }, { opacity: 1 }, 3.05);
    tl.fromTo(N, 1, { opacity: 0 }, { opacity: 1 }, 3.1);
    tl.fromTo(D3, 1, { opacity: 0 }, { opacity: 1 }, 3.15);
    tl.fromTo(O3, 1, { opacity: 0 }, { opacity: 1 }, 3.2);
    tl.fromTo(N2, 1, { opacity: 0 }, { opacity: 1 }, 3.25);

    return tl;
}

/* MASTER TIMELINE */

var master = new TimelineMax({
    repeat: 1,
    repeatDelay: 0,
    yoyo: true
});

master.add(myTimeline());
1 Like
12

Wow ok it was that easy!?!?! I thought I had to nest ALL of that code inside one big function and call that back or something. I feel so stupid lol.

Thank you so much!!! It looks great - http://emma-dodi.webflow.io/

:slight_smile:

1 Like
13

Hi,

Sort of a cold thread but this led me to solve the same problem, but it required a little more work.

This passage:

$.get(urlToMySvg, function(data) {
  $('#ajaxContent').append(data);
});

… did not work out of the box. I’m unclear why exactly, but the ‘data’ variable passed into that callback was not of the correct type. I had to coax it a little bit with the xml serializer (probably a mime type-thing with my CDN? or goblins)

Anyway, here’s what ended up working for us:

$.get(urlToMySvg, function(data) {
  $('ajaxContent').append(new XMLSerializer().serializeToString(data));
});

Hopefully this will help future civilizations in case the embed/jQuery/div-replacement trick doesn’t work right away.