Develop Reference

Autoplay SVG with ScrollMagic when entering window

I have this SVG that animates on scroll (svg drawing) with ScrollMagic, this works perfect but what I am looking for is that the svg just starts playing automatically and fully animates when it enters the window and that its not slowly animating on scroll.
Is there a way to do this?
function pathPrepare ($el) {
var lineLength = $el[0].getTotalLength();
$el.css("stroke-dasharray", lineLength);
$el.css("stroke-dashoffset", lineLength);
}
var $word = $("path#word");
var $dot = $("path#dot");
// prepare SVG
pathPrepare($word);
pathPrepare($dot);
// init controller
var controller = new ScrollMagic.Controller();
// build tween
var tween = new TimelineMax()
.add(TweenMax.to($word, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9
.add(TweenMax.to($dot, 0.1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw dot for 0.1
.add(TweenMax.to("path", 1, {stroke: "#33629c", ease:Linear.easeNone}), 0); // change color during the whole thing
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 200, tweenChanges: true})
.setTween(tween)
.addTo(controller);
* {
width:100%;
height:100%;
padding:0;
margin:0;
border:0;
}
#trigger1 {
width:100%;
height:1px;
background:#ff0000;
}
.spacer {
width:100%;
height:100%;
background:#000000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
<div class="spacer"></div>
<div id="trigger1"></div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="350" height="200">
<path id="word" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1009.2315673828125px; stroke-dashoffset: 1009.2315673828125px;" fill="none" stroke="#000000" stroke-width="5" d="M22.328,70.018c9.867-7.4,10.724,20.434,13.014,28.694c-0.08-9.105-1.308-31.463,11.936-31.886
c11.313-0.361,17.046,19.368,16.367,28.098c-1.432-10.289,6.234-30.682,18.163-25.671c11.505,4.833,8.682,26.772,20.071,31.964
c13.06,5.953,14.854-8.305,19.734-17.017c7.188-12.836,4.933-15.417,29.6-14.8c-8.954-3.842-37.42,1.728-28.539,20.1
c5.823,12.045,34.911,12.583,30.018-8.873c-5.385,17.174,24.01,23.104,24.01,9.123c0-9.867,3.816-15.937,16.034-18.5
c8.359-1.754,18.982,4.754,25.9,9.25c-10.361-4.461-51.941-13.776-37.749,12.357c9.435,17.372,50.559,2.289,33.477-6.063
c-2.871,19.008,32.415,31.684,30.695,54.439c-2.602,34.423-66.934,24.873-79.302,2.134c-13.11-24.101,38.981-36.781,54.798-40.941
c8.308-2.185,42.133-12.162,25.88-25.587c-2.779,17.058,19.275,28.688,29.963,12.911c6.862-10.131,6.783-25.284,30.833-19.117
c-9.404-0.429-32.624-0.188-32.864,18.472c-0.231,17.912,21.001,21.405,40.882,11.951"></path>
<path id="dot" style="stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 44.29783630371094px; stroke-dashoffset: 44.29783630371094px;" fill="none" stroke="#000000" stroke-width="5" d="M247.003,38.567c-7.423,1.437-11.092,9.883-1.737,11.142c14.692,1.978,13.864-13.66,1.12-8.675"></path>
</svg>
<div class="spacer"></div>

Try setting duration in the ScrollMagic.Scene duration to zero - demo here: https://codepen.io/Alexander9111/pen/XWJozXZ
// build scene
var scene = new ScrollMagic.Scene({triggerElement: "#trigger1", duration: 0, tweenChanges: true})
.setTween(tween)
.addTo(controller);

gsap rotation - how to avoid sharp transitions

Could someone help me make this swing more fluently, without this sharp transitions from one direction to another? The animation should be like a swing on wind.
const stepDuration = 0.5, wing = '#wing';
gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})
const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "circ.inOut", duration: stepDuration }})
.add('start')
.to(wing, { rotation: -15 })
.to(wing, { rotation: 15 })
}
window.onload = () => {walk()};
svg {
position: fixed;
left: 50vw;
top: 25px;
width: 70%;
height: 70%;
animation: a01 9s;
background: #0099cc;
}
#wing {
fill: gold;
transform-origin: top center;
animation: awinga 25s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
<path id='wing' d="M100 0 L150 0 L150 300 L100 300 Z" />
</svg>
<script>
</script>

What you want is basically a tweening/easing function that tapers out at the start and at the end, without a sharp gradient in between. The reason of your jerking is because for the circ.inOut easing, there is basically an infinitesimally small period of time where the gradient is infinite (right at the 50% mark), which causes the sharp jerking you see when it's mid-tween (right when your element rotates past the vertical midline):
Therefore, you should pick an easing function that doesn't have that abrupt change in the middle, e.g. power1.inOut or the likes of it:
[
const stepDuration = 0.5, wing = '#wing';
gsap.set(wing, {transformOrigin: "50% 0%", rotation: 15})
const walk = () => {gsap.timeline({repeat: -1, defaults: { ease: "power1.inOut", duration: stepDuration }})
.add('start')
.to(wing, { rotation: -15 })
.to(wing, { rotation: 15 })
}
window.onload = () => {walk()};
svg {
position: fixed;
left: 50vw;
top: 25px;
width: 70%;
height: 70%;
animation: a01 9s;
background: #0099cc;
}
#wing {
fill: gold;
transform-origin: top center;
animation: awinga 25s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MotionPathPlugin.min.js?v=15"></script>
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" version="1.1" viewBox="0 0 1280 720">
<path id='wing' d="M100 0 L150 0 L150 300 L100 300 Z" />
</svg>
<script>
</script>

countdown timer loader animation

Circle outline completes before timer finish. Although it is working fine when with the larger circle. fiddle
var time = 10;
var initialOffset = '440';
var i = 1
/* Need initial run as interval hasn't yet occured... */
$('.circle_animation').css('stroke-dashoffset', initialOffset-(1*(initialOffset/time)));
var interval = setInterval(function() {
$('h2').text(i);
if (i == time) {
clearInterval(interval);
return;
}
$('.circle_animation').css('stroke-dashoffset', initialOffset-((i+1)*(initialOffset/time)));
i++;
}, 1000);
svg {
transform: rotate(-90deg);
}
.circle_animation {
stroke-dasharray: 440;
stroke-dashoffset: 440;
transition: all 1s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item html">
<h2>0</h2>
<svg width="70" height="70" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<circle id="circle" class="circle_animation" r="25" cy="35" cx="35" stroke-width="4" stroke="#6fdb6f" fill="#ccc"/>
</g>
</svg>
</div>

You have to reduce the offset, both in css and javascript, i updated your code there :
http://jsfiddle.net/3recj0s9/
CSS :
.circle_animation {
stroke-dasharray: 155;
stroke-dashoffset: 155;
transition: all 1s linear;
}
JS
var initialOffset = '155';

Can an SVG background be interactive?

I have an SVG image that I created. It is a rectangle with a circle inside it. The circle follows the users mouse using JavaScript. The image is represented by the following code:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlspace="preserve" preserveAspectRatio="xMidYMin slic">
<style>
* { vector-effect:non-scaling-stroke }
rect { fill: blue; }
circle { fill:orange; opacity:0.75; }
</style>
<rect cx="50%" cy="0" width="720" height="1278" id="origin" />
<circle cx="50%" cy="116" r="72" id="dot" />
<script>
var svg = document.documentElement,
pt = svg.createSVGPoint(),
dot = document.querySelector('#dot');
svg.addEventListener('mousemove',function(evt){
var loc = cursorPoint(evt);
dot.setAttribute('cx',loc.x);
dot.setAttribute('cy',loc.y);
},false);
function rotateElement(el,originX,originY,towardsX,towardsY){
var degrees = Math.atan2(towardsY-originY,towardsX-originX)*180/Math.PI + 90;
el.setAttribute(
'transform',
'translate('+originX+','+originY+') translate('+(-originX)+','+(-originY)+')'
);
}
// Get point in global SVG space
function cursorPoint(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
</script>
</svg>
What I would like to do with this image is use it as a CSS background. If I use CSS to set the image as a background {background: url("image.svg");} then the JavaScript no longer works, i.e. the circle no longer follows the cursor. I believe this is due to the fact that when the image is a background, it has other elements stacked on top of it.
So how can I have the image be a background and also remain interactive? Any suggestions would be greatly appreciated.

One of the way to get a scripted background SVG working, is to use CSS4 element(). It's currently only implemented in Firefox 4+ via -moz-element().
An example:
<div id="bg" style="width: 400px; height: 400px;">
<svg width="400" height="400" viewPort="0 0 400 400">
<!-- force correct 0,0 coordinates -->
<rect x="0" y="0" width="1" height="1" fill="transparent" />
<rect x="0" y="0" id="animable1" width="120" height="120" fill="blue" />
<rect x="0" y="0" id="animable2" width="60" height="60" fill="red" />
</svg>
</div>
<div id="target" style="border: 4px dashed black; height: 400px; width: 400px; background: gray -moz-element(#bg); background-size: 20%;"></div>
<script type="text/javascript">
var divTarget = document.getElementById("target");
var animable1 = document.getElementById("animable1");
var animable2 = document.getElementById("animable2");
document.addEventListener("mousemove", function(event){
var rotation = Math.atan2(event.clientY, event.clientX);
animable1.setAttribute("transform", "translate(140 140) rotate(" + (rotation / Math.PI * 360) + " 60 60)");
animable2.setAttribute("transform", "translate(170 170) rotate(" + (360 - rotation / Math.PI * 360) + " 30 30)");
}, false);
animable1.setAttribute("transform", "translate(140 140) rotate(0 60 60)");
animable2.setAttribute("transform", "translate(170 170) rotate(0 30 30)");
</script>

You should create two files one of the .css file and the other one is Of course, better to have separate files, because it is actually a part of the container is html. SVG within this container,'s JavaScripts. This divide-and-conquer simplification or incident. For this reason, the external file is actually being held as JavaScripts. This is a great way to will not loose in the code.
SVG defining:
<div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="moving_circle.svg"></object></div>
Here, the part of the data you describe your own SVG
for example, canvas:
canvas = d3.select("#circle-svg")
.on("mouseover", mouseover)
.on("mousemove", mousemove)
.on("mouseout", mouseout);
Part1:
Take a look at this code (html based)
<head>
<title>Controlling an SVG with Javascript</title>
<script type='text/javascript' src='svg-interaction.js'></script>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<style type="text/css">
div.tooltip {
position: absolute;
text-align: center;
z-index: 10;
width: 140px;
height: auto;
padding: 8px;
font: 24px sans-serif;
background: red;
color: white;
border: solid 1px #aaa;
border-radius: 8px;
opacity: 0;
}
</style>
<head>
<body>
<h2>Controlling SVG with Javascript</h2>
<div class="page-content">
<div><object id="circle-svg" width="400" height="300" type="image/svg+xml" data="moving_circle.svg"></object></div>
You can define your scripts over there
Then you continue to the second phase (Your SVG study)
<svg viewBox="0 0 400 400" preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a3="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
a3:scriptImplementation="Adobe"
onload="init(evt)"
onzoom="updateTracker(evt)"
onscroll="updateTracker(evt)"
onresize="updateTracker(evt)">
<script type="text/ecmascript" a3:scriptImplementation="Adobe"><![CDATA[
/*****
*
* Globals
*
*****/
var elems = {
tracker: false,
cursor: false,
trans: true,
scale: true,
mx: true,
my: true,
ux: true,
uy: true
};
var frame = {
x_trans: 0,
y_trans: 0,
zoom : 1,
x_scale: 1,
y_scale: 1
};

cycle jquery plugin is taking width:100% and giving it to left style on option scrollHorz

I'm making a slideshow that works with a responsive layout. After hours of work the slideshow is now responsive to the layout, but because of the width being 100% options fn:'scrollHorz' isn't working correctly. Because the width: 100% is being given to the left: style on the class. So my question is how can I get this to work. I would really appreciate any help.
This is my markup
<div id="test">
<section>
<img src="images/sliderContent_1.png" alt="Slide 1" />
</section>
<section>
<img src="images/sliderContent_1.png" alt="Slide 2" />
</section>
<section>
<img src="images/sliderContent_1.png" alt="Slide 2" />
</section>
</div>
this my css
section {
margin: 0;
}
img {
max-width: 100%;
}
img.loading {
margin-bottom: 2em;
visibility: hidden;
}
#page-wrapper-test {
width: 100%;
margin: 0 auto;
}
#test {
width: 100%;
}
div.loading {
width: 100%;
}
#test section { width: 100%; }
and this is my script
$(document).ready(function() {
$('#test').prepend('<img class="loading" src="images/loading.gif" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
slideExpr: 'section',
fx: 'scrollHorz',
timeout: 0,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
fit: 1,
});
});

Did you try setting the slideResize to false? This way the cycle pluggin doesn't change your css props.
Doesn't work with 100% width
I had the same problem, but with scrollVert, and this solved the issue.

You need to set height property for your jQuery cycle. There's some strange behavior with scrollHorz. I'd suggest you to use scrollLeft instead. But then you would need to set custom function for pager to scrollRight when needed.
Here's how your JS snippet should look like:
$('#test').prepend('<img class="loading" src="" />');
$('#test').after('<div id="nav" class="nav">');
$('#test').cycle({
slideExpr: 'section',
fx: 'scrollLeft',
timeout: 1000,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
height: "100px",
fit: 1,
});
Here's how you can use custom functions for your pager:
var $test = $('#test');
$test.prepend('<img class="loading" src="" />');
$test.after('<div id="nav" class="nav">');
$test.cycle({
slideExpr: 'section',
fx: 'scrollLeft',
timeout: 2000,
pager: '#nav',
next: '#test',
slideResize: true,
containerResize: false,
width: '100%',
height: "200px",
fit: 1,
after: function(currSlideElement, nextSlideElement, options) {
slideIndex = options.currSlide;
nextIndex = slideIndex + 1;
prevIndex = slideIndex -1;
if (slideIndex == options.slideCount-1) {
nextIndex = 0;
}
if (slideIndex == 0) {
prevIndex = options.slideCount-1;
}
},
pageAnchorBuilder: function(idx, slide) {
return '' + idx + 'a';
}
});
var $navChildren = $('#nav').children();
$navChildren.unbind('click');
$navChildren.click( function(e) {
var idx = $navChildren.index(this);
if (idx < slideIndex) {
$test.cycle( idx, 'scrollRight' );
}
else if (idx > slideIndex) {
$test.cycle( idx );
}
e.preventDefault();
});
Check it out here:
http://jsfiddle.net/vfonic/uTpqB/

Cycle makes the next child level of elements down from the parent slideshow container the slides. In your example <section>.
You should define the height and width of the slide elements in your CSS. Otherwise when (document).ready fires and your images are partially loaded you will get unexpected results.