Search the Community
Showing results for tags 'background'.
Found 16 results
-
I have made a 'day' scene. When the mouse clicks on the sun, it changes to the moon. When this happens it would be nice that the background also changed. How is the best way to do it? I'have added 2 skies and 2 grounds. One is for during the day and the other one is for the night. <g id="sky"> <rect id="night" class= "nacht" x="1.4" y="1.2" class="st0" width="841.9" height="472.3"/> <rect id="day" y="1.2" class="st1" width="841.9" height="472.3"/> </g> <g id="ground"> <rect id="light" x="-0.4" y="473.6" class="st2" width="841.9" height="121.7"/> <rect id="dark" y="473.6" class="st3" width="841.9" height="121.7"/> </g> I'm thinking about to add an timelineMax or an TweenMax. How do you handle this? I have no idea how to start... Can someone please help me? Thanks in advance -
I' m sorry, but i start using gsap, from a few days, so my question may be a little silly... which is the best way to animate css background-position property? I've tried doing: TweenMax.to('.back', 8, {'background-position':300}); where '.back' is the element with background image. .back { background: rgba(0, 0, 0, 0) url("img/seq2_0000.jpg") no-repeat fixed 0 0 / 200% 100%; } but what i'm tryng to get is a kind of 'seamless loop' in the background for example a sky and clouds horizontal moving. Anyway GSAP is amazing!!! -
I noticed that very specific to Apple iOS mobile devices using the Safari browser on mobile, using the animation effect marginRight for background elements having a background-image with repeat-x seemed to have a stuttering effect. When viewed in desktop browsers and browsers other than Safari, the stuttering effect on the background repeated element is not seen. Is it because of one of the CSS effects I applied, which is the width != 100%, or is it the way GSAP JavaScript code is written? Please kindly view the Codepen attached. All good helpful feedback appreciated! -
Hey guys, i was wondering if there was a way to animate a background so that it is slowly moving or could add some different kind of effects. Thank you!
-
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 there, I have created this background pattern animation and it works smoothly on safari/chrome/IE but I am experiencing some kind of stutter/lag in firefox. It even causes lag outside the browser when using other programs (OS X/macbook pro). I have searched the forum and tried all possible solutions I could find (force3D:true, rotation:0.01, etc.) but no luck. Would really appreciate any help as I am stumbling in the dark here. Oh and thanks for an awesome framework! Great stuff! Note: somehow when using codepen the strokes are blurry. This doesn't happen when working on my test server: http://preview.frodoschering.nl/pattern-animation-2/ so probably unrelated to the above issue.
-
I bet there's a good explanation for this and probably a much better way to accomplish a background crossfade but I'm seeing some strange behavior. In the codepen, I have an SVG with 2 foreignObjects each containing a div with a background image as a base64 image URL. Overlaying that is a group element with a text>tspan with some text in it. I've got a simple autoAlpha tween on the top-most background div from 1 to 0 over 3 seconds and at the same time, the lower-most BG goes from 0 to 1. The crossfade is a little wonky but what's weird is the text is affected by the fade in Chrome. Firefox seems to handle it fine but I need it to work in Chrome. I can set either of the backgrounds to zero opacity and the text looks fine. I'm wondering if it has something to do with positioning because if I add any kind of position setting to the div's with the backgrounds I lose the text behind the background divs. Any idea why this might be happening?
-
Hello, Coming back to GSAP after some months in 'another universe'. Could it be possible to animate a body background image without disturbing the other elements in this body ? The intended animation is a mosaic effect. Thanks for an answer and if this is something we can do thanks for a starting point.
-
Hello everyone! This is my first post here having started to learn jQuery very recently. Learning it is very exciting but there's so much to get your head around... I look at lots of websites and try to learn as much as I can. Can you tell me what would be the best way to achieve this effect- http://spain.madeforspainandportugal.com/en/ -background image looping around a circle or a path? Many thanks in advance!
-
Hey guys, I was wondering, is it possible to tween the body background image? I know you can on other divs (or I guess more precisely you tween the whole dom element) but with the body everything seems to tween BUT the background image. I've tried both opacity and autoAlpha, and any dom elements within the body tween fine, but the background image is visible on load. Any way to do this? If not, no biggy. I just wanted to keep my code cleaner and avoid having a fullscreen img tag hanging around in my HTML.
-
Hi guys, I am animating a div with a transparent background (the ball). When I use rotation the transparent background seems to get a black background in IE8. This only appears when I use css rotation in my animation. Is there someone who have seen this before and knows how to get rid of this problem? Is it possible to use rotation in any other way than css? This is what my animation looks like; tlBall.to(ball, 0.2, {css:{left:"400px",top:"366px",rotation:360}, delay:0, ease:Sine.easeInOut}) This is that the background with the ball looks like; http://cl.ly/image/1U2a0w0T3O17/image004.png Thanks! - Marcus
-
Hi! I've ran into this. < var div = document.createElement('div'); < TweenMax.set(div, {backgroundSize: 'cover'}); < console.log(div.style.backgroundSize); > "50% 0px" It's should be "cover", isn't it?
-
Hey all, I currently have a header with some repeating background pattern. What im looking to do is make this repeating background pattern move towards right and bottom from a point of position: absolute; - in the same speed and in an infinite loop. You can see a dummy here - hope it somewhat illustrates what im looking to do: http://codepen.io/anon/pen/oapnB Initially my idea was to have it move in one direction first for like 10secs and then change to another direction - as the codepen illustrates. However lets just keep it simple: - Would anyone be able to tell me if im able to move my background pattern infinite in one direction? Right now I offset the background outside of the screen, so that I have some extra background to actually move around without it ending - im not sure how to adress that for an infinite solution - perhaps some resetting needs to be done? But in that case im not even sure how to do that so it looks in sync.
-
TweenMax.set(obj,{backgroundImage:'url(path/to/img)', background:'black'}) This should result in the background being black with no image set. You're setting the background shorthand property second, which should overwrite any other background properties. jQuery does this correctly according to order. GSAP is merging them, setting a background image with a background color. Yes, this should be considered a common use case. Taking one object with script defaults and merging them with another object containing user settings can result in this type of scenario. I haven't done any testing, so I'm not sure what other CSS properties this behavior may be affecting.
-
Hi everyone, I'm new to GSAP and am trying to duplicate a jQuery animation using Greensock. One of the effects is a constant scrolling background similar to http://www.kudoswebsolutions.com/blog/jquery_scrolling_background/demos.html Using tweenMax I've come up with TweenMax.to($("#bg"),1,{css:{backgroundPosition:"+=1px 0"},repeat:-1}); However the background position resets every time the animation repeats. How can I continue the animation indefinitely without setting the time to something like 99999?
-
I am trying to create a background effect using jquery and GSAP. I have a large repeated background that when the mouse moves over it, the background should follow slightly with easing. There will be a large content div with a transparent BG over top of the main background. The background should continue to follow even when the mouse is over the content. How would I implement this? Thanks, Zach
