Jump to content
Search Community

valent_inf

Members
  • Posts

    5
  • Joined

  • Last visited

valent_inf's Achievements

2

Reputation

  1. 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 :'(
  2. 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
  3. " 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 !
  4. 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 ?
×
×
  • Create New...