Search the Community
Showing results for tags 'css'.
-
Hi everyone, I just learned to make animation website and join in greensock. I'm trying to learn to create a website using the exact same background effect as the one implemented on this website, http://thegigi.it/ in this website using a plus sign in the background and follow the direction of the mouse, I've asked in some forums and finally found the answer using tweenmax. Please guide me how can i achieve the same background effect? thankyou.
-
Hello, I'm trying to use DrawSVG for the external border . As you can see I have 4 blocks that appear one by one . What I'd like to do is : As soon as the first block appears a border should start and complete its path as the last block appears I hope I'm clear what I want
-
Hi , Guys I am new , i am trying to stop tweenlite but css transformMax3d is still there, i am creating a slider like revolution slider editor but i am not able to get how i stop the tween in editor , inline style is still there so if you stop in middle of animation(See the attachment) , element will hang in middle of the page , i am using . clear() , kill() , also try killall but still css there , also try clear prop all but no luck please help me as soon as possible , i am also interested in split text purchase but , stuck in tween ?? please help me
-
I have a circular input with a width and height of 80vw/vh (depending on portrait or landscape).. GSAP Draggable uses the translate3d for the draggable component, but when I resize my window it doesn't center my #controller element anymore because of that.
-
I'm trying to animate a div (mask) from left to right using width, keeping the text static. I have tried to achieve this using transformOrigin & marginLeft Any other suggestions welcome Thanks
-
Hello I am able to scroll the div from right to left side but I have to display the div linearly when scrolling the mouse wheel.The current code is not displayed liner. I mean I have to display smoothly from right to left. TIll now I haven't used GSAP. Would you help me out in this? https://jsfiddle.net/Narendra2015/3s5su2q3/
-
Hi guys, I want to know if its possible to achieve animation like this with morphSVG? (see the link below) https://giphy.com/gifs/3o6fJ1O72KpIh4YRLa. Im trying to wrap my head around how to achieve this and I liked to know how you guys would approach an effect like this.
-
Hi, I am building a new site and plan to use GSAP to animate some svg in the future. My question is: if I am importing such a large and extensive library should I then use it for every animation on the site? Should I use GSAP over css for simple effects of the DOM.. like opacity on hover? I am more comfortable with the css, but I know I need to learn the GSAP anyway for my other ideas. SO the question is should I use GSAP for everything, or use a combination with css?
-
I want to animate the home page of my website like this one : http://discoveroutpost.com/ I am using GSAP TweenMax function but unable to get the smooth animation like this. I am also trying the ScrollMagic Library for it but still no luck. Please guide how can I achieve this. Thanks in advance.
-
I try to copy this website to study and I found that my fonts are not smoothly. I would like to gain your suggestion how to make website like this. Thank you, Kopkap. http://www.carlsberg.com/170/
-
Is it possible to staggerFrom the same point on a relative positioned div? The Circles all start from 200px from their individual positions, whereas I'd prefer them to start at left:200px in absolute coordinates. Thanks
-
Hi, As the title says, just before starting the tween the background colour flashes to white. Only on Firefox. I've tried to '.set' and also '.fromTo' to 'force' the starting colour of the background but no avail. Browser: Firefox 55.0.3 (64-bit) Os: OsX 10.11.6 Device: MacBook Pro (Retina, 13-inch, Early 2015) Thank you
-
Hi, I've encountered a small bug relating to the rotation property. As you can see in my codenpen I'm rotating a single Gear in the SVG. It is being animated to 360 degrees and is repeating indefinitely. The behavior is as expected except the fact that if you observe carefully, there is a slight jerk/glitch/delay whatever you call it, in the animation. It becomes more noticeable as we slow down the animation. I swear I saw a post regarding this bug on this forum some time ago but now I can't find that post that's why I'm asking again. Is there any way this can be fixed? Any help would be really appreciated. Many Thanks! Ali
-
I got two issues when I want to use css "clip-path" and its attribute "inset". The first one is I can't make it work as animation, I want it to move to Clip-path:inset(50% 0px 0px) slowly, but it doesn't work. The second one is I can't use something like Clip-path:inset (-50% 0px 0px),I want to use minus parameter, but still not working How can I make these work with GSAP? Thanks
-
Anybody have an issue with className? I use className to add a class to stop the main page from scrolling when a window(modal) is in view. Sometimes it is removed on timeline reversal. Sometimes it doesn't remove. When it doesn't remove it leaves the main page un-scrollable. I've got 3 sites in production at the moment and this happens on all of them.
-
Hey guys, First of all, let me appologize for my bad english because i'm french. I have a problem with scrollmagic. Usually, i put th code below to customize my scrollbar with CSS. But when it's with scrollmagic, it has no effect. ::-webkit-scrollbar-track { background-color: #fff; } ::-webkit-scrollbar { width: 8px; background-color: #000; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #000; border-radius: 8px; border: 2px solid #fff; } Does a solution exist for this issue or i'm blocked with the default weird scrollbar ? you can see the result in this url : http://test.jdo-univers.eu
-
In other instances (if I'm remembering correctly), I've been able to chain multiple transforms (ex: translateX and scaleX) and animate them, but it doesn't seem like I can achieve the same thing with multiple filters. `.to(clearSVG, 1, {css:{opacity: 1, width: '92px', filter: 'drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.7)) blur(0px)'}})` Attempting to troubleshoot this I've tried just animating one of the properties and... If my css is: `.clear-svg { filter: blur(15px) drop-shadow( 10px 10px 15px rgba(255,255,255,.7) ); }` and my tween is: `.to(clearSVG, 1, {css:{opacity: 1, width: '92px', filter: 'drop-shadow(0px 0px 0px rgba(255, 255, 255, 0.7)) blur(0px)'}})` OR `.to(clearSVG, 1, {css:{opacity: 1, width: '92px', filter: 'blur(0px)'}})` it won't trigger or it just snaps to the end CSS. If I have just one property or the other in CSS and have the same prop in JS, it will tween. But I can't tween *both*. Do I need to set up some sort of function to slowly tween all the numerical values (similar to: https://codepen.io/joemidi/pen/omsrL?editors=1010) or can I target both filter props with the GSAP tween?
-
Hey guys, I'm trying to create an animation for a cup of coffee that has hot steam leaving it. The idea is to have 2 curved lines that constantly move up on the y-axis. The top and bottom of the paths are hidden behind a mask. My goal is to have the paths constantly move up with the illusion that it's constant. Right now you can see the path has to stop, then reset its position before moving back up. I hope this makes sense. Is this possible?
-
Please check my tutorial on my Layout Helper tool to create banners faster:
-
Hi, I was using these two scripts in my HTML5 banner ads: <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> I had to put these two banner ads through google so as per the https://support.google.com/richmedia/answer/6307288, I changed the above scripts to: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript" src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js"></script> After running the code, it throws an error saying that "TimelineMax is not defined". Can anyone please tell me what am I suppose to do to fix this? Thanks
-
Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
-
Hey guys, When i upload the code from illustrator the background color outlines my graphics. You can see it on the cats head and arm. It's also outlining where the mans head touches his shoulders. In illustrator the graphic are perfectly lined up. Any advice on how to avoid this?
-
I'm trying to have .scene1 slide off the page to the left side of my animation. My goal was to add a property of overflow:hidden to a group named .screen-wrapper. The idea is that once .scene1 slides off the screen it would not be seen beyond the white screen. Sadly this is not working. When checking out the code it seem to be taking the attribute. Is there a way to-do overflow:hidden, or am i doing it wrong? Any help would be great.
-
Start and Stop Animations with Scroll Jquery Event - Not Working
foxhound3311 posted a topic in GSAP
This is my first GSAP animation. I'm very new to this and Jquery. I'm trying to create an animation that will play once the user scrolls to it on the website. I created a scroll script that works great when i'm simply changing a background-color when the users scroll to the element, but i can't figure out how to attach it to my SVG animation. I thought it would be as simple as nesting my GSAP code within my Jqeury but it's not working. My goal is to have the SVG play once the user scrolls to it, and then stop playing if the user scroll away from the icon. I also notice the SVG is floating outside of the Div. Any advice would be appreciated. -
Can you share your methodology for HTML and CSS when working banners. You know, the non-GSAP part? I usually chop up the PSD to get my images. I name images as I will reference them on CSS, HTML and JS; so product.png will be <div id="product" class="animated"><img src="product.png" /><div> then on CSS I will have .animated { display: block; position: absolute;} #product { left: 10px; top: 35px;} Then when the layout is done I start the GSAPing from there.
