Jump to content
Search Community

Vool.Studio

Premium
  • Posts

    5
  • Joined

  • Last visited

About Vool.Studio

  • Birthday November 12

Profile Information

  • Location
    Sydney

Vool.Studio's Achievements

  • Week One Done
  • One Month Later
  • One Year In

Recent Badges

0

Reputation

  1. Hey everyone, I'm stuck with ScrollMagic and SplitText. I'm using SplitText for many classes. I need to replicate the same function all over again in the same page. All the other animations are fine, except for SplitText. splitTextBody = new SplitText(".split-text-body", {type:"words"}), wordsbody = splitTextBody.words; $('section').each(function(){ var textBlock = new TimelineMax(); textBlock.add(TweenMax.to($(this).find('.underline-body'), .75, {x:0, ease:Expo.easeOut})) .add(TweenMax.staggerFrom($(this).find(wordsbody), 0.8, {opacity:0, y:"100%", ease: Expo.easeOut}, 0.012)) .add(TweenMax.staggerTo($(this).find('.underline-form'), .75, {x:0, ease:Expo.easeOut}, 0.12), '=-1'); var scene = new ScrollMagic.Scene({ triggerElement: this, duration: 0, offset: 0, }) .setTween(textBlock) .addTo(controller) }); I'm able to call SpliText with no problem when it's just one for each page. But not in this case. When I have classes like this I'm not able to figure it out. Thanks in advance for the help! Cheers.
  2. I Jonathan, Thanks for your answer and your Pen. Actually, I'm still having the same issue as before, even with your example. In my build, I've called the animation after the loader of the DOM too, as you've suggested. And yes, I've tried both solutions with the image in the CSS or the HTML. Same thing. I think this is a browser issue at this point. Especially considering that you can see it properly. I'm on Mac OS Sierra, Chrome 53.0.2785.116 (64-bit) Cheers
  3. Hi, Same problem here. I created a pen to show the issue: http://codepen.io/LorenzoBocchi/pen/ZppQBk It's completely fine in Firefox and Safari. On Chrome is very very slow. I've already tried using smaller images or call the image in the HTML instead of the CSS. Nothing. The weird thing is that in my actual build, during the entire animation the rest of the website "freeze". I'm also using Parallax.js and until the animation is completed the entire experience is not smooth at all. Chrome MacOs Sierra Version 53.0.2785.116 (64-bit)
  4. Hello Jonathan, Thanks! And thank you for your reply. My bad, I'm sorry. I kept working on that pen and I solved it. This is why you cannot find the issue. Please forgive me, I am a designer and I never used Codepen before. Here you can find a new version with the issue: http://codepen.io/LorenzoBocchi/pen/GjpKJp Basically I changed this timing from "0.01" to "0" .add(TweenMax.to('.line-inside', 0.01, {x:"-200%", opacity:1})) and now it's not flashing anymore. The affected lines was: (JS – Line 2 and 4). Thanks!
  5. Hi, I'm having an issue using TimelineMax with a loop repeat. The animation works fine but sometimes there's some sort of "flashing" in the animation. It looks like the div inside is repositioned for a millisecond in the wrong place. I cannot understand why this happens and why it happens randomly. I linked a Codepen working example. Any ideas? Thanks!
×
×
  • Create New...