Jump to content
Search Community

PonyBoy

Premium
  • Posts

    6
  • Joined

  • Last visited

About PonyBoy

PonyBoy's Achievements

  1. I'm working on a small proof of concent piece. As you can see in the HTML I have a series of simple divs stacked atop each other with a class '.flex-container'. The css basically sets each div's width and height to match the browser window and centers it's contents both vertically and horizontally. Each '.flex-container' div is also labeled with one of two other classes: '.text-holder' or '.box-holder'. The difference is one holds either a <div> (.box-holder) that is a simple box created via css and the other holds a <p> element (.text-holder) which will eventually hold text fed in via GSAP's TextPlugin. The issue is when I run the script locally or via code pen that the pinning is off after the fourth '.flex-container' div. That div and the following div become separate and you'll see some white background appear for a moment until the next div scrolling kicks in. However, the animation in the following div is off... all the following divs after those initial four do not scroll / animate as expected... that is until you resize the browser / adjust the size of the codepen panel. Once resized the scrolling and pinned animations work perfectly / as expected. I can't figure out what's not updating initially that updates when you resize the browser / panel (To adjust the size of the codepen panel either open the panel (Edit via Codepen) or click on one of the scaling buttons, ie 1x, .5x, .25x - you'll see the break between the 4th and 5th panels instantly fix itself). I'm running 2 simple forEach loops that assign the animations / ScrollTrigger variables to each 'text-holder' and 'box-holder' div... I don't seem to have any errors in the console. Thank you for having a look!
  2. Hello GSAPers ? First... Happy New Year! I'm usually able to find solutions quite quickly using these forums — Thank you to everyone for always posting useful questions and solutions... the info I find in these forums is a big part of why I'll continue to be a member of Club Greensock. Please refer to my codepen. My main issue: All my JPGs scale jaggedly only in Firefox (Chrome and Safari seem fine). I've tried using GSAP's 'scale' parameter and also combining 'scaleX' and 'scaleY' to no avail. My sub issue: Linked SVG files unexpectedly 'scale' (oddly enough... nice and cleanly ) instead of rotating on any requested 3D access (using rotationX or rotationY). However, I believe I have a solution to my 'sub' issue (but would love any guidance / suggestions if there is a better solution or if I'm incorrect for that matter!). If you look at the first four animated lines of text in the HTML you'll see they're a part of an embedded / masked svg element. They rotate on the 3D access just fine which tells me I need to embed all my SVG and not link to it. Please note: This issue is also only occurring in Firefox. Thank you in advance for any guidance!
  3. I really appreciate all the feedback! Thank you, everyone. I will test all these suggestions except for the "add your iframe to the first slide" suggestion only because I actually originally had the iframe on the first slide when I discovered the issue then moved it to another slide to see if being on slide 1 was causing the clunkiness.
  4. Hola forum... first time posting... please note I'm about 6 months new to using the JS version of TweenMax and I still am very much learning. I was a TweenMax user over in Flash for YEARS and am VERY grateful for what you've created in JS. You have created a wonderful tool! However, I've got a prob. I haven't put this in codepen as what I'm trying to get working seems to work just fine in straight HTML by itself... including in Safari, my problem browser (link below). A quick description of what I'm doing: I'm using a WP theme ('The Ken' created by Artbees) w/a fullscreen slideshow plugin. The slideshow is primarily images with the exception of one or two slides I'd like to add animated content to (all SVG). The way I load my animation is simply by placing an <iframe> in my slide content. This works beautifully in both Chrome and Firefox... but Safari and any browser in IOS renders my animation painfully choppy (nearly non-existent unless you stare at it closely... so I know it is 'working'!). This is a URL to the actual source being loaded up in the <iframe>... you'll see this runs wonderfully in any browser (including IOS browsers): http://aztacofestival.com/wp-content/themes/ken-child/main-slide-logo.html Here is the final Dev page in question: http://aztacofestival.com/arizona-taco-festival-2016/ There are four slides in the slideshow at the moment. Please click to slide 2—this is the slide in question. This page I'm developing uses TweenMax all over the place and it's working brilliantly (ie: top right 'We <3 Our Sponsors" is TweenMax. The testimonial roll in the boilerplate / footer area when the pages loads is TweenMax, and all the rollovers below the main slideshow (scroll down) are using TweenMax (again, working beautifully in all browsers). Please note that all my animations are triggered via their own functions. I've tried whittling back all my animation to just the main logo scaling and still have the issue (There is a lot going on. I figured the issue may have been that the animations combined are processor intensive... doesn't seem to be the issue as I have reduced this animation to 1 simple item and still have the issue). I'm worried this may come down to a theme issue... it's just that it's only occurring on Safari (and any IOS browser) that has me confused. Something strange you'll encounter in Safari: When you inspect the source via Safari's 'web inspector' the animations all begin to move / work. But only when in the inspector / rolling over the SVG items markup). Thank you in advance for taking a moment!
×
×
  • Create New...