Jump to content
Search Community

Search the Community

Showing results for tags 'background-position'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


X


CodePen


Company Website


other


Location


Interests

Found 2 results

  1. I've experienced some issues animating background position. As usual everything is perfect in Webkit I only care about IE9+, FF, Chrome, Safari. TweenMax.fromTo($('#rain-' + i), 1, {css:{'background-position': ""+rainHeight+"px 0px"}}, {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); This animates the position of a css linear gradient. It works on everything except Firefox, Firefox just does nothing. However this.... (with camel cased keys) TweenMax.fromTo($('#rain-' + i), 1, {css:{backgroundPosition: ""+rainHeight+"px 0px"}}, {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); ...works fine in Firefox, but causes an invalid argument error in IE10 (it's fine in IE9) SCRIPT87: Invalid argument TweenMax.min.js line 16, character 20973 For the time being I have implemented the following special case which is grim. if (document.all && window.atob) { // Firefox breaks with 'background-position' // IE10 breaks with 'backgroundPosition' // bodge to workaround TweenMax.fromTo($('#rain-' + i), 1, {css:{'background-position': ""+rainHeight+"px 0px"}}, {css:{'background-position': ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); } else { TweenMax.fromTo($('#rain-' + i), 1, {css:{backgroundPosition: ""+rainHeight+"px 0px"}}, {css:{backgroundPosition: ""+(-rainHeight)+"px 0px"}, repeat: -1, delay:offset, repeatDelay: 0, ease: Linear.easeNone } ); } Any suggestions? Is this something that can be fixed in TweenMax?
  2. Hi, GreenSock, I'm trying to animate background-position for two background images. It works fine in Firefox, but doesn't in Chrome. Demo (codepen got blocked at work, hope jsfiddle is ok): http://jsfiddle.net/dftks9m1/3/ If you play animation in Firefox, the two images animate up and down nicely and in sync. If you play animation in Chrome, however, images are also animated horizontally and are out of sync. After the animation is reversed, the end value of background-position is set to "background-position: 50% 43px, 50% 50%;" which is wrong. Does anyone know what is going on and how this could be fixed? Thank you, and I love your library!
×
×
  • Create New...