Jump to content
Search Community

Jayson

Members

  • Posts

    5

  • Joined

  • Last visited

Jayson's Achievements

0

Reputation

  1. Jayson
    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
  2. Jayson
    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") }
  3. Jayson
    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.
  4. Jayson
    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?
  5. Jayson
    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> <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> </head> <body> <svg id="svg-defs"> <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> </defs> </svg> <div id="myAd"> <div id="bg01"> <img id="img1" src="bg_01.jpg" width="160" height="600"/> </div> </div> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> 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> <!-- <script src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.18.0_499ba64a23378545748ff12d372e59e9_min.js"></script> --> <script type="text/javascript" src="TweenMax.min.js"></script> <script type="text/javascript"> 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> <div id="myAd"> <div id="bg01"> <img id="img1" class="" src="bg_01.jpg" width="160" height="600"/> </div> </body> </html> TweenMax.min.js mine_testing for browsers.html
×
×
  • Create New...