Search the Community
Showing results for tags 'css'.
-
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.
-
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. -
This might not the right forum, but would appreciate any thoughts. In my codepen I am animating a div with an image in it. The issue is that I am animating my div left from 100% to -100%. However -100% is WAY longer than when the rightmost edge of the div is off of the screen, adding extra time. I essentially want it to end up at right: 100%. Is there a way using CSS to get it to stop at the equivalent of right: 100%, but while animating left? I was able to solve the issue by calculating the values dynamically on window.resize and killing and redeclaring the tween. Surely there has to be a better way? Thank you.
-
I have an image: and I want to fill the missing part of it. The best way I found was to convert the missing part of the image to SVG and then start filling the missing part using tweenmax. For reference, I have added the animation for filling the svg but it is not animating like what I need i.e. it is increasing from center point. I need to blend the animation like the image missing area is filling from one end. I can change the way of animating if there is any other way we can fill the missing part of the image? I have also tried other solution of fill mode but smooth transition is not happening in it.
-
How can I make a text float in like a wave from left to right. I am able to get the text into the frame normally but not like a wave form. Is there a way of doing it?
-
Hi guys, I can't figure out why the colors aren't animating in Safari + Firefox. I used all the vendor prefixes. Works fine in Chrome...Any ideas? Thanks!
-
Hi I have problem when animating with CSS calc(). It's just jump to new position, without delay and animation. Is there any special way to do css math when tweening? How to make tween relative to viewport or container?
-
Hi all, I have been stuck because of this click function I want to work. Basically what I want to achieve is if you hover on the item the animation wil start and when unhover the animation wil reverse, this happens to work really good. The part i'm having problems with is the click function. if the user click on the button the div that is related to the button will be shown. Right now if the button is clicked the div will hide or not being shown. I think the reason for the related div not being shown is because of the Gsap animation. I could help some advice for keeping me in the good direction how I could make this work. see my codepen
-
I'm trying to make a line appear my text which starts from width: 0 and expands to the width of the text. The way it works currently is it starts from the left (width: 0) and expands all the way to the right (width: 100%). The way i want it to work is: It starts from the center and expands to the left and to the right until it reaches width of text. How can you do this?
-
I am working on a webpage where I use ScrollMagic and GSAP for animations. I usually work on one general layout and then refine it for different screen sizes. I just divided my css by media query so I can target different screen sizes and all my animations stopped working!? The CSS is the same- the only difference is whether it is just one style or the same style divided by query. Do you know the reason for this happening?
-
I am working on this map (not sure why the animation itself is not working on the Codepen). I made it on a 27in monitor and on a big screen it works fine. However, when I started working on the stylesheet for smaller screens I realised that this map on a typical 13in Mac laptop (1280x800) I realised that I have a bit of a white border at the bottom because the monitor is of different proportions to my image. Is there a way of stretching the SVG to cover the full height of the DIV? I tried adjusting many different parameters but none of them seem to do anything. I also noticed that adjusting padding-bottom on <div class="svg-container" style="padding-bottom: 58%;"> does not do anything to the size of the image!?
-
Hi, I am trying to slide two lines in a campaign (one line in one frame and the second in the second frame). I want the second line to follow the first line after few seconds. I am able to slide in and slide out the first line but when I add the second line in the code, the code does not work. Can anyone help me out in this. Here is the link to the jsfiddle: https://jsfiddle.net/5pq750ko/ (If you remove line 4 and 5 from the JS code, you will see the code working. But when I will add the lines back, the code stops working) Thanks -
Hi, I am new to greensock and I need little help with it. I am trying to reveal few words (2-3 words in a line) as the ball rolls across the x-axis. Is there a way to do that? In my code, the ball rolls till then end and then displays the text, but I want the text to be displayed as the ball moves across. Codepen link: http://codepen.io/anon/pen/pROjra http://codepen.io/anon/pen/pROjra Thanks
-
If i have set transform either with css og TweenMax.set - e.g. transform: translateZ(100px); can I add other transform translates/rotations/etc. and keeping the translateZ?
-
Hi guys, Just quickly (I haven't got time atm to slap an example codepen together), is there a way to toggle the CSS className attribute? I have an object that's being manipulated a lot, and one of the tweens is removing a class from an element, and animating it's new position accordingly. className: '-=responsive-example_small' This works fine, until I reverse the timeline... At which point the class isn't re-added to object, and obviously, no animation occurs, resulting in a broken reverse animation. I know I can remove the "-=", but that overwrites all the classes on the element in question as well, which is again, undesirable and dangerous to maintain. Is there a toggle for ClassName that I simply haven't come across before? Much like JQuery's $(e).toggleClass('someClass')? If not, is it a possibility for the future? Thanks a lot!
-
Tab info
-
Hi, I have placed a Youtube video in my banner which shows after a few animations. It is working fine. The issue is I have given the exit id which is over the whole banner, a z-index of (for example) 40; Because of this z-index, I am unable to click on the progress bar of the youtube video to skip sections of the video. If I take the Z-index off the exit, it works, but then when I go back when I click on the banner again, on the video, it just plays the video, doesn't take me to my exit url. I need the z-index on the exit for that is the exit for the ad. Is there a way around this?
-
I want to try to use greensock animations in the UI. What css framework it is better to use? I understand that this is a strange question, but perhaps there are recommendations. Foundation, Bootstrap, Skeleton or something else?
-
Hi - this isn't a strictly GSAP related question, but you guys are wicked smaaaht, so I thought I'd ask here. (Incidentally, I'm using the fantastic Bannertime generator from @joe_midi, but this isn't related to that either). I have a object that's centered in the browser window using a combination of negative margins and absolute positioning. When resizing the browser window, the border flickers on the right and bottom edges in Safari only - it's fine in Chrome and Firefox. The structure of the object is as follows: <div class="banner"> <div class="border"></div> </div> The .border div is 2px smaller than its parent element, to account for the 1px border all around, and it's this border that flickers when the browser is resized. I have a demo of this in action here. Again, I see this behavior in Safari only. I would love any suggestions as to how I can prevent this from happening. Thanks, guys!
-
If i repeat timeline comand tl.from(head, 0.5, {left:100}); it will repeat objects movement stating from position defined in css. Is it possible to move same object several times from previous position? So instead of tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:200}); - 100px tl.from(head, 0.5, {left:300}); - 100px it would be tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px tl.from(head, 0.5, {left:100}); - 100px
-
Hi, Has anyone come across this before where an svg element that's been animated with CSS animation and has the animation-fill-mode: forwards applied to it means that GSAP can't animate that element's property? What I'm trying to achieve is an animated preloader that animates in via css animation, so that it's lightweight and GSAP doesn't have to load in the document head, but when the app fully loads GSAP is used to animate it out with a more complex animation. However… In the codepen example used, the marker is initially positioned outside it's native svg position, then after 0.5 sec it animates back to its native position. However to get the marker to remain in that position at the end of the animation it requires 'animation-fill-mode: forwards' otherwise it jumps back down. I've added a basic GSAP tween to simulate a window.load function by just adding a 2 second delay, to animate it up after the css animation has finished, but it doesn't animate due to this css property being added. You can see the console is logging out at the end of the 'non moving' GSAP animation. Any ideas folks? Or do I deserve a banana award today for being dim? I am very tired today Cheers, Pete.
