Search the Community

Hello, I'm trying to have animate a clip path on a div. The div contains an image or a video. The clip path is in a svg, and i use css to apply the clip path, but the animation is laggy. I have tried to insert an image into to the svg the animations i smooth. When i try to use foreignObject to put the video into the svg. The animations is smooth, but there is somekind border on the foreignObject. Currently im stocked how to proceed, what should i search for, how do i debug? In my codepen the first two examples is clippath on a div with some element inside. The next two is the element inside the svg.

Hi, I'm creating a basic banner in Adobe Animate and need to reveal some text using a moving clipping mask. I've tried creating a traditional clipping mask using animate and then animating the mask using TweenMax, but this doesn't seem to work. Any suggestions? Many thanks Tony

Hello there, I’ve just updated an ongoing project that makes use of clip: rect() animations to GSAP 1.18.3 and it seems that said animations no longer work, on any browser. Clipping values are properly set, but they are now changed instantly regardless of the wanted durations and easings. 1.18.2 seems to work fine. Is that on purpose? I know the CSS clip property has been set to be deprecated for a while, but given the poor browser support of clip-path, its so-so performances and its downright unstable behavior at times, I feel like clip’s days are not quite over yet.

Alright, I have problems with interactivity. In an attempt to rectify that I am trying out draggable. I have been unable to find a starting from scratch tutorial so, I just read a lot of notes on it and got it to kind of work. I think there might be a problem with my layout, but since I just kind of jumped in I am not sure how to set up my markup to work with this. A brief description of my project; I am building interactive maps. They have multiple floors meaning multiple layers. The navigation has to stay put, but I want to be able to zoom in and drag the map around to scroll it. It has to remain in my #canvas and get clipped if it exceeds those bounds. My problems; after I zoom in it drags to show the hidden portions of the map, but then snaps back to center. After I drag the map, it changes the z-index of the draggable #images to 1001, and every drag after increases that number by 1. My markup: #canvas { position: absolute; background-color: black; width: 1080px; height: 1080px; overflow: hidden; } .mapLayer { width: 1080px; height: 1080px; position: absolute; overflow: hidden; } #images { overflow: hidden; position: absolute; top: 0px; left: 0px; width: 1080px; height: 1080px; z-index: 0; } #key { position: absolute; } #legend { position: absolute; top: 170px; left: 33px; } #buttons { position: absolute; top: 830px; left: 24px; width: 300px; z-index: 5; } .btn { position: relative; margin-top: -4px; } #chooseview { position: absolute; top: 800px; left: 24px; } #zoom { position: absolute; top: 40px; left: 40px; display: block; width: 50px; z-index: 5; } .zoom { width: 50px; height: 50px; } My code: window.onload = function() { var images = document.getElementById('images') var canvas = document.getElementById('canvas') var btn01 = document.getElementById('btn01'); var btn02 = document.getElementById('btn02'); var btn03 = document.getElementById('btn03'); var btn04 = document.getElementById('btn04'); var zin = document.getElementById('zin'); var zout = document.getElementById('zout'); var you = document.getElementById('you'); var fl01 = document.getElementById('fl01'); var fl02 = document.getElementById('fl02'); var fl03 = document.getElementById('fl03'); var fl04 = document.getElementById('fl04'); var st01 = document.getElementById('st01'); var st02 = document.getElementById('st02'); var animateFl01 = new revealFl01(); var animateFl02 = new revealFl02(); var animateFl03 = new revealFl03(); var animateFl04 = new revealFl04(); var animateZin = new ZoomIn(); var animateZout = new ZoomOut(); //: This is to hide layers on start. TweenLite.to(you, 0, {opacity:1}); TweenLite.to(fl01, 0, {opacity:1}); TweenLite.to(fl02, 0, {opacity:1}); TweenLite.to(st01, 0, {opacity:1}); TweenLite.to(fl03, 0, {opacity:0}); TweenLite.to(fl04, 0, {opacity:0}); TweenLite.to(st02, 0, {opacity:0}); //: These are button functions to show and hide layers. function revealFl01() { this.tweenCount = 0; this.animate_Fl01 = function(){ TweenLite.to(you, 0.25, {opacity:1}); TweenLite.to(fl01, 0.25, {opacity:1}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl01(event){ animateFl01.animate_Fl01(); } function revealFl02() { this.tweenCount = 0; this.animate_Fl02 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:1}); TweenLite.to(st01, 0.25, {opacity:1}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:0}); TweenLite.to(st02, 0.25, {opacity:0}); this.tweenCount++; }; } function animate_Fl02(event){ animateFl02.animate_Fl02(); } function revealFl03() { this.tweenCount = 0; this.animate_Fl03 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:1}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl03(event){ animateFl03.animate_Fl03(); } function revealFl04() { this.tweenCount = 0; this.animate_Fl04 = function(){ TweenLite.to(you, 0.25, {opacity:0}); TweenLite.to(fl01, 0.25, {opacity:0}); TweenLite.to(fl02, 0.25, {opacity:0}); TweenLite.to(st01, 0.25, {opacity:0}); TweenLite.to(fl03, 0.25, {opacity:0}); TweenLite.to(fl04, 0.25, {opacity:1}); TweenLite.to(st02, 0.25, {opacity:1}); this.tweenCount++; }; } function animate_Fl04(event){ animateFl04.animate_Fl04(); } function ZoomIn() { this.tweenCount = 0; this.animate_Zin = function(){ TweenLite.to(you, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl02, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st01, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl03, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(fl04, 0.25, {height:2000, width:2000, left:-540, top:-540}); TweenLite.to(st02, 0.25, {height:2000, width:2000, left:-540, top:-540}); this.tweenCount++; }; } function animate_Zin(event){ animateZin.animate_Zin(); } function ZoomOut() { this.tweenCount = 0; this.animate_Zout = function(){ TweenLite.to(you, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl02, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st01, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl03, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(fl04, 0.25, {height:1080, width:1080, left:0, top:0}); TweenLite.to(st02, 0.25, {height:1080, width:1080, left:0, top:0}); this.tweenCount++; }; } function animate_Zout(event){ animateZout.animate_Zout(); } btn01.onclick = animate_Fl01; btn02.onclick = animate_Fl02; btn03.onclick = animate_Fl03; btn04.onclick = animate_Fl04; zin.onclick = animate_Zin; zout.onclick = animate_Zout; Draggable.create(images, {type:"scroll", edgeResistance:0.85, bounds:(canvas)}); }; Unfortunately my images are proprietary so I can't put up a working version yet. If anyone has seen a tutorial about this, has ideas on how to scroll the clipped off part, or if anyone knows where I screwed this up please let me know.

Imagine having a set of light rays surrounding a circle - just like the sun. What I want to do is reveil the rays, so the appear to be "rising" from the sun. In Flash I would be able to create a nice effect for this by doing something like the following steps: - Divide the rays into x amount of groups (symbols) - Create a circle mask that will scale up "grow" to reveil the rays - Run the circle mask with 0.3 delay on each of the x amount of groups I figured that I could emulate something similar with the clipping mask, but that only works with rectangles?