[BackgroundImage doesn't work properly on Safari]

Ok. Thanks for clarifying. It always helps if you provide a demo.

 

From what I can tell using background instead of backgroundImage should work:

 

See the Pen LxQWbX by anon (@anon) on CodePen

Thanks a lot !

[BackgroundImage doesn't work properly on Safari]

I'm having trouble understanding how or why you would animate the url of a background-image. Are you expecting it to load 6 different images over the course of 0.1 seconds? Or do you just want to swap in a new single image?

 

Can you please clarify the desired effect you are trying to achieve? 

 

If you are trying to build a spritesheet animation it will be much more reliable to put all the images together in one and offset the background position.

This is a very basic implementation: 

See the Pen vLFmd by GreenSock (@GreenSock) on CodePen

 

In order for us to help you come up with a solution it would greatly help if you supplied a CodePen demo that we can edit and test.

 

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

The simpler you make it, the better.

Thanks!

 

 

 

Hey, 

 

Well I would like to set a background on a div when I'm hovering an el. I made some search and I realized that I should use tl.SET instead of tl.TO. 

 

So I've update my code :

tl.set(videosBg, {
        backgroundImage: "url('" + thisProp.background + "'"
 })

This is still working on Chrome but still not on Safari :'(

[BackgroundImage doesn't work properly on Safari]

Hey, 

 

I'm actually working on an event website but I'm getting some trouble with the property BackgroundImage in Safari. 

 

Here is my code : 

tl.to(videosBg, 0.1, {
    backgroundImage: "url('" + thisProp.background + "'"
},0.30);

thisProp.background is returning a path like this one "./assets/bg_props/bg_prop6.png". 

 

This short code is actually working on Chrome / Firefox but not on Safari. It's like, it was not accepting the property background-image. 

 

Here the targeted div on Chrome (working) : 

 

And here on Safari (not working) :

 

 

If you have any idea

[staggerTo working once]

Hi and welcome to the GreenSock forums,

 

Its very difficult to diagnose that amount of code out of context but it appears that you are only creating your timeline "tl" once, somewhere that I can't see.

Each time you mouseenter or mouseleave you are just adding new animations to the beginning of that same timeline. You might be overwriting previous animations and / or not telling the timeline to restart() after you add these new things.

 

I'm not sure what type of effect you are going after but it seems that you are doing different animations on different elements based on different conditions so it seems best that you create a NEW timeline on each interaction instead of adding tweens to the same timeline.

 

If you need more help, it would be great if you could provide a simple reduced test case (without all the dynamic factors, conditional logic) so that we can quickly assess the problem. We recommend using CodePen or jsfiddle: http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

" You might be overwriting previous animations and / or not telling the timeline to restart() after you add these new things."

 

That was the problem ! Thanks a lot !

[staggerTo working once]

Hey, 

 

I'm having some trouble with GSAP and the .staggerTo. 

 

The fact is : the staggerTo is working the first time I'm hovering an element and it's unstaggering as I want when I leave the el but when I'm hovering it again the staggerTo isn't working anymore ! 

 

Here the code : 

for (var i = 0; i < hexagons.length; i++) {
    hexagons[i].addEventListener('mouseenter', function(e) {
      
      var propSelected = this.dataset.prop,
      links = this.querySelectorAll('.mini_vid_link');
      
      function findProp(prop) {
        return prop.prop === propSelected;
      }

      var thisProp = propositionsVideos.find(findProp);

      videosBg.style.background = "url(" + thisProp.background + ") center center no-repeat";
      videosBg.style.backgroundSize = "cover";

      if (thisProp.orientiation === 'left'){
        tl.to(videosBg, 0.6, {
          x: 0,
          autoAlpha: 1,
          ease: Power3.easeIn
        }, 0)
        .staggerTo(links, 0.6, {
          x:-20,
          autoAlpha: 1,
          scale:1,
          ease: Elastic.easeInOut.config(1, 0.3)
        }, 0.2, 0)
      } else {
        tl.to(videosBg, 0.6, {
          x: 0,
          autoAlpha: 1,
          ease: Power3.easeIn
        }, 0)
        .staggerTo(links, 0.6, {
          x:20,
          autoAlpha: 1,
          scale:1,
          ease: Elastic.easeInOut.config(1, 0.3)
        }, 0.2, 0)
      }

      

    }, false);
  }

  for (var i = 0; i < hexagons.length; i++) {
    hexagons[i].addEventListener('mouseleave', function(e) {
      var propSelected = this.dataset.prop,
      links = this.querySelectorAll('.mini_vid_link');
      
      function findProp(prop) {
        return prop.prop === propSelected;
      }

      var thisProp = propositionsVideos.find(findProp);

      if (thisProp.orientiation === 'left'){
        tl.to(videosBg, 0.3, {
          x: 30,
          autoAlpha: 0,
          ease: Power3.easeOut
        })
        .staggerTo(links, 0.6, {
          x:20,
          autoAlpha: 0,
          scale:0.8,
          clearProps: 'all',
          ease: Sine.easeOut
        }, 0.2, 0)
      } else {
        tl.to(videosBg, 0.3, {
          x: 30,
          autoAlpha: 0,
          ease: Power3.easeOut
        })
        .staggerTo(links, 0.6, {
          x:-20,
          autoAlpha: 0,
          scale:0.8,
          clearProps: 'all',
          ease: Sine.easeOut
        }, 0.2, 0)
      }

What i'm doing wrong ?