Jump to content
Search Community

Text animation questions

flash08 test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm working on a lightweight text slider for use on WordPress sites. The slider's context appears to be an issue: on some sites, contained within a widget, the animation works perfectly. On others, using a different WP theme, when the animation runs, the "slides" do slide, but instead of sliding out of view, they just slide to the far right side of the screen, underneath the other content. The "offscreen" slides remain partially visible under that content.

 

I am pretty sure this is concerned with the distance the "slides" move, which I'll admit I don't fully understand. The basic code was forked off of another similar pen, I think, but a long time ago. The basic issue here is that the available plugs for basic WP animation are beasts: tons and tons of code, enough to slow page loading times by many seconds.  TweenLIte, of course, is extremely lightweight. 

 

I'd be grateful if someone could explain the movement pieces of this TweenLite animation, so that I could figure out where the "offscreen" slides need to "go" to remain invisible.

See the Pen xYqPzV by WPdude237 (@WPdude237) on CodePen

Link to comment
Share on other sites

Hi @flash08 :)

 

I'm not sure, but I think you're asking how far along the x axis to place those other divs so they're off the screen at the beginning of the anmation?

 

If that's the question, you could just check the width like this:

var ww = window.innerWidth; 

 

Then just use that value in your tweens instead of your hard coded 960px.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 5
Link to comment
Share on other sites

Thanks! For some reason, the movement animation is not working properly within the WordPress structure. I can move the slides off screen, but their travel is visible on screen, and looks odd, within certain WordPress templates - and not on others. I could add some alpha tweens, but instead, modified an existing slide switcher pen to work with my text "slides", here:

See the Pen eVEJJo by WPdude237 (@WPdude237) on CodePen

I am going to work out some autoAlpha tweens for the slides, so they can fade in and out more gradually, but I have to look up the syntax. I don't have too much call for animation, and my GSAP chops get pretty rusty over time!

Link to comment
Share on other sites

I've run into another small snag - probably due to the way that WordPress uses jQuery in compatibility mode. I've updated the pen, and it runs fine here. But inside a WordPress environment, the slides change, but their positions shift down the page as each new slide loads. When the four are done, the sequence starts again at the top of the page. (Unfortunately, since I am still testing, I cannot point to a live instance here...)

 

I found that in order to get any Javascript to run within WordPress, I had to change all of the variable declarations like this:

 

Standard syntax : var images = $('div.tslide')

 

New syntax : var images = jQuery('div.tslide')

 

I am thinking that the position:absolute rule in the CSS file might be the answer, and tried adding this:

top: 0px;

But that doesn't seem to have any effect on the slides moving positions down the page as they change.

 

The updated pen is at: 

See the Pen eVEJJo by WPdude237 (@WPdude237) on CodePen

 

Link to comment
Share on other sites

I'm not sure I'm following your new question.

 

You're saying that everything works correctly in the CodePen demo, but not in your WordPress site? If that's the case, I'd say some other script, plugin or CSS must be causing a conflict. Do you happen to be animating the same divs with CSS and GSAP so they fight for control? Just a guess. As far as the CSS goes --  I would think setting position absolute and top:0 on the divs would certainly place them on top of each other.

 

I wish I could offer more advice, but this sounds like some other conflict not related to GreenSock.  If you can recreate a GSAP related problem in your CodePen demo, we can almost certainly help you with a solution.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I am guessing what you want is to slide children around in a parent element and have them be hidden when they are outside of it's frame?

 

The basic css for this is to have the parent set position:relative with overflow:hidden and the children (elements you are sliding) set position:absolute with left,top or x,y positions, and animate them to wherever you want them to go.  

 

Note that the parent item will need to have it's size declared or calculated in some way; ie width:some value, height:some value as well, as absolutely positioned children will not impart size to their containing elements.

 

Assuming your script is running properly, getting the right selectors etc, it sounds to me like your issue is probably your css construct. 

 

 

  • Like 2
Link to comment
Share on other sites

Is this along the lines of what you were after I modified your original post. It demonstrates basically how to set up the css and I modified a few of the animation properties so it slides visible items to the left.

 

This is hardcoded to absolute sizes in px. If you want to place it here there or everywhere in a WordPress site then you would have to probably work out percentage based sizing for things to have it work wherever you want to place it. 

 

See the Pen BYroNx by Visual-Q (@Visual-Q) on CodePen

 

  • Like 3
Link to comment
Share on other sites

Thanks so much for your help.

I am not sure why this does not work within WordPress, but I am assuming it has (again) to do with the way the WordPress uses jQuery in compatibility mode. I have the TweenLite script enqueued in WordPress properly (checked in the page headers, and it's there), but upon trying to use the JS here, I still receive this error:

 

Uncaught ReferenceError: TweenLite is not defined

 

Something obviously not specified correctly.

Link to comment
Share on other sites

Sahil has most likely nailed it if TweenLiteis not defined then it is probably not present when your script initially tries to run. 

 

Also if you haven't already you probably want the script inside a document ready or window onload to make sure the all the assets are ready when the script runs.

  • Like 1
Link to comment
Share on other sites

Yes, that was it - thank you!

 

I am finding a lot of inconsistencies across the various places I can place JS code within WordPress. I suspect that this is due to nested <div> elements and the existing CSS for the theme with which I am working. But at least for the time  being, I've got GSAP scripts actually running. (I had noticed that someone actually wrote a WP plug for Greensock, but it apparently was abandoned - and it's not on the WP plugins repository, so best left alone, for now.

 

Thanks to all for their help!

Link to comment
Share on other sites

Unless you are in canvas GSAP is primarily concerned with animating the css properties of DOM elements. What this means is that you always have to construct the css for elements you are animating to fit and behave as intended where they are placed. Unfortunately GSAP isn't a widget that conforms to anything specific or anywhere you wish to place it. That's something you have work out yourself.

 

Begin by exploring the elements in the theme where you want the slider to be placed in browser dev tools and figure out how they are constructed then you can adapt your css to fit in properly. 

 

Link to comment
Share on other sites

Thanks. I have used GSAP animations before on all sorts of (non-WordPress) sites with little issue. I am going to get back to exploring the problems I experienced with using GSAP in WordPress, but for now I am going to go the jQuery route with an adaptation of the Owl Carousel script, as it runs without any issues within WP - including within the widget's context.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...