Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
dadoumda

I cannot get TweenMax.selector work correctly

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

Hello,

 

I'm using a software which creates html content. In order to add some special effects, a new option allows to publish within a iframe rather than in the page.

The devs add a new function in JS, getDisplayDocument(), to always get "document" without being aware if this option is on or off. 

Rather than writing :

TweenMax.from(getDisplayDocument().querySelectorAll(".image"), 1, {autoAlpha:0, delay:0.3});

 

I wanted to use TweenMax.selector in order to set a context like that :

TweenMax.selector = getDisplayDocument().querySelectorAll;
TweenMax.from(".image", 1, {autoAlpha:0, delay:0.3});

 

But I can't get "TweenMax.selector" work correctly. There is no effect when I define it. I tried with jQuery, an empty function,... nothing changes. 

 

So, I decided to hard-change the TweenMax.min.js of my resource. But I'm not pleased with this solution.

Can someone explain me what I'm doing wrong please ?

 

Thanks :)

 

Link to comment
Share on other sites

Hello @dadoumda and Welcome to the GreenSock forum!


Any reason why your trying to use getDisplayDocument() ?? I only see that with use of https://www.trivantis.com/

 

For jQuery you have to do the following:
 

// define selector for simple selectors to work with GSAP
TweenLite.selector = jQuery;

 

GSAP under the hood already uses document.querySelectorAll() by default.

 

See: https://greensock.com/docs/TweenMax/static.selector

 

If your still having issue please create a reduced

See the Pen by pen (@pen) on CodePen

demo example

 

 

Happy Tweening! :)

  • Like 4
Link to comment
Share on other sites

Thanks for your welcome Jonathan :)

 

Yes, I have to use getDisplayDocument() because Trivantis Lectora version>17 pushes this function. It's a way to get productions published correctly with or without the new option (using an iframe or not). It returns the good reference to "document".

 

Doing a codepen is difficult in this case... It's firmly tied up with Lectora. Allow me to precise my previous examples :

 

TweenMax.from(getDisplayDocument().querySelectorAll(".image"), 1, {autoAlpha:0, delay:0.3});

 

This instruction works in every contexts, as expected.

 

But my wish is to simplify my life :) and keep the good old syntax :

 

TweenMax.from(".image", 1, {autoAlpha:0, delay:0.3});

 

So I digged a little and found https://greensock.com/docs/TweenMax/static.selector;). Yay ! 

 

My problem is that the following instruction changed nothing :( :

 

TweenMax.selector = getDisplayDocument().querySelectorAll;

 

And with further testing, I realised that defining TweenMax.selector never changed anything... TweenMax behaved as if I was not there. And I hate being ignored :D ... when coding ! 

 

Last news : I realised a simple test but couldn't post in Codepen because it's "under heavy load". I confirm I do not understand how Tweenmax.selector works...

 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>TweenMax.selector</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="TweenMax.min.js"></script>
</head>
<body>
    <img id="img1" src="img1.jpg" alt="Image1">
    <img id="img2" src="img2.jpg" alt="Image2">
    <img id="img3" src="img3.jpg" alt="Image3">
    <script>
        // Function to make my example look like Lectora's context
        function getDisplayDocument() {
            return document;
        }

        function jQuery(el) {
            console.log("Selects with a pseudo jQuery");
            return getDisplayDocument().querySelectorAll(el);
        }
        function anonymousSelector(el) {
            console.log("Selects with an anonymous selector");
            return getDisplayDocument().querySelectorAll(el);
        }
       
        // Try with an anonymous selector
        TweenMax.selector = anonymousSelector;
        TweenMax.to("img", 1, {autoAlpha:0, delay:0.3});
        // The console reports "Selects with a pseudo jQuery" !!! It's not anonymousSelector which is called but jQuery.
        // If I comment function jQuery, no output, the default selector is used

    </script>
</body>
</html>

 

Thanks for your attention :) Have a nice day !

 

Edit : Codepen is back, I tried posting my above example but the Codepen's console sent nothing...

Edited by dadoumda
Codepen is back
Link to comment
Share on other sites

Yeah, the way you were trying to do it had two problems: 

  1. You'd be losing the context of your querySelectorAll() call. That's a JavaScript scope thing, unrelated to GSAP. 
  2. You need to change the selector at the root level, TweenLite, not TweenMax. 

Try something like this: 

TweenLite.selector = function(value) {
    return getDisplayDocument().querySelectorAll(value);
};

 

Does that help? 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Thanks a lot :) ! It works perfectly ! Happy to tween... and to learn more and more about js

 

Have a nice day !

  • Like 1
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.
×