Jayson

December 4, 2018

this is amazing can you explain to me the third option in more depth please as this is how I want to do it but I'm not exactly sure how to implement it as I want to add another timeline after tl

December 4, 2018

Hey, can anyone help me I want tl to play after start is finished but I just don't know the syntax thank you so much!!

  var start = new TimelineMax();
      var tl = new TimelineMax({paused: true, repeat:2});

      start.add("start",0);
      start.add("fade1",2.5);

      tl.add("fade2",0);
      tl.add("fade3",2.5);
      tl.add("fade4",5);


      start.to("#white-cover", 0.5, {
        opacity: 0,
        ease: Power0.easeNone
      }, "start")
      .to("#asset-img1", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade1")
      .to("#asset-img2", 0.5, {
        left:0,
        opacity: 1,
        ease: Power0.easeNone}, "fade1")
      .to({}, 2.5, {})


      tl.to("#asset-img2", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade2").
      to("#asset-img3", 0.5, {
        left: 0,
        opacity: 1,
        ease: Power0.easeNone}, "fade2").
      to("#asset-img1", 0, {
        left: -300,
        opacity: 0,
        ease: Power0.easeNone}, "fade2").
      to("#asset-img1", 0.5, {
        left: 0,
        opacity: 1,
        ease: Power0.easeNone}, "fade3").
      to("#asset-img3", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade3").
      to("#asset-img2", 0, {
        left: -300,
        opacity: 0,
        ease: Power0.easeNone}, "fade3").
      to("#asset-img2", 0.5, {
        left: 0,
        opacity: 1,
        ease: Power0.easeNone}, "fade4").
      to("#asset-img3", 0, {
        left: -300,
        opacity: 0,
        ease: Power0.easeNone}, "fade4").
      to("#asset-img1", 0.5, {
        left: 300,
        opacity: 0,
        ease: Power0.easeNone}, "fade4")

    }

February 1, 2018

19 minutes ago, Oliver16Years said:

Sorry my fault, no. There is SVG in Safari, but no standard DOM support for .style.clip = "rect(0px 100px 10px 0px)";

If You could make a CodePen example we could debug it. But at first glance i think the DOM and the SVG can't be mixed in this way.
You have to put the image into SVG context to be able to clip it. ( <image> tag ).

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/image

Hey I'm not the most experienced developer and not exactly sure how to make it into Codepen seeing how i kind of put it all in one Html file.

February 1, 2018

3 minutes ago, Oliver16Years said:

Cupertino silently dropped clip-path support in the background when was in the middle of a campaign based on it.

Not exactly sure what you mean by that. are you trying to say that there is no SVG on safari? And how about the animation?

February 1, 2018

Hi guys been trying to make an animation for work where there is an image that goes from left to right with a clipping path to make the image have some sort of cut on the top. My problem is that it doesn't work on safari but somehow works on every other browser even firefox.

I linked all the assets needed in the same folder to make the animation.

<!DOCTYPE html>
<html>
   <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>test</title>
       <style type="text/css">
#bg01 img{clip-path: url(#clip1); position: absolute; top: 0; left: 0;}
#svg-defs {position: absolute; width: 0px;height: 0px;}
</style>

var start = 0.1;
var trans = 0.3;
var bg1_time = 3;
var tl = new TimelineMax();
var tl1 = new TimelineMax();

tl1.from('#mask1', trans, {
x: -170,y: -35,ease: Power1.Out})

               tl.to([tl1],
                               start,
                               "sequence",
                               "-=0.45")

</script>
</body>

</html>

That was the original code.

I made the animation slower and tried all i can to fix it on this code but some reason the only way it seemed to work is if i constantly resized the browser.

<!DOCTYPE html>
<html>
   <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>test</title>
       <style type="text/css">
#bg01 img{
   /* clip-path: url(#clip1); */
   -webkit-clip-path: url(#clip1);
   position: absolute; top: 0; left: 0;
}
body{
   width: 200px;
   height: 800px;
}
#myAd{
   width: 200px;
   height: 800px;
}
.svg-defs {position: absolute; width: 0px;height: 0px;}
</style>

   function resize(){
       console.log("tick");
       window.requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame
|| function(f){return setTimeout(f, 1000/60)} // simulate calling code 60

       requestAnimationFrame(function(){
           console.log("requested")
       })
   }

function main(){

// TweenLite.ticker.useRAF(false);
// TweenMax.lagSmoothing(1000, 16);

       var ad = document.getElementById('myAd');
       var mask1 = document.getElementById('mask1');
       var img = document.getElementById('img1');

       function update(){
           console.log(img)
           // console.log("tick");
           // window.dispatchEvent(new Event('resize'))
       }

setInterval(update, 1000);

// TweenMax.ticker.addEventListener("tick", update);

       var start = 0.1;
       var trans = 5;
       var bg1_time = 3;
       var tl = new TimelineMax();
       var tl1 = new TimelineMax();

       var mask1 = document.getElementById("mask1");
       var clip1 = document.getElementById("clip1");
       var ad = document.getElementById("myAd")

       tl1.from(ad, 10, {
               x: 0,y: 0
       })

tl.from(mask1, trans, {
x: -170,y: -35,ease: Power1.Out})

// tl1.from(mask1, trans, {
// x: -170,y: -35,ease: Power1.Out})

       // tl.to([tl1],
       //                start,
       //                "sequence",
       //                "-=0.45")

// TweenMax.ticker.removeEventListener("tick", update);

}

       </script>
</head>
   <body onLoad="main();" onResize="resize();">
           <svg class="svg-defs">
                   <clipPath id="clip1">
                       <rect id="mask1" x="0" y="150" transform="matrix(1 0.2 0 1 0 0)" class="st0" width="170" height="610"/>
                   </clipPath>
   </svg>

</body>

</html>

TweenMax.min.js

mine_testing for browsers.html

Notifications

Messages

Jayson

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Blog

Product

Showcase

FAQ

Downloads

Posts posted by Jayson

On Complete play new timeline

On Complete play new timeline

Code doesn't seem to work on Safari

Code doesn't seem to work on Safari

Code doesn't seem to work on Safari