Jump to content
Search Community

Getting basic Flips to work

AndyWhite007 test

By AndyWhite007
in GSAP

Moderator Tag
 Share

Recommended Posts

AndyWhite007 test

AndyWhite007

Posted
Posted

Hi there - my first post so definately 'dumb question alert' but I've attached the html, css and js to get the Flip plugin to work. I've put in relative links etc but no amount of re-arranging or alternative suggestions seems to work. It's from the codepen.io example so it's definately my fault. However - any help appreciated. (doesn't work in Chrome, FF etc.)

Thanks

Andy

01_Flips.zip

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi @AndyWhite007 and welcome to the GreenSock forums!

 

I ran the code you posted (zip file) and everything works as expected in bot Chrome and Firefox on Ubuntu 20 and 22.

 

If you're having a problem with a different setup, please post a minimal demo that illustrates exactly what you're trying to do.

 

Let us know if have any other question.

 

Happy Tweening!

Link to comment
Share on other sites
AndyWhite007 test

AndyWhite007

Posted
  • Author
Posted

Thanks for the reply. I can see why you'd want the minimal demo. The zip file is 99% the code from 

See the Pen eYdyVVe by GreenSock (@GreenSock) on CodePen

 - the only lines I've added are to reference the Flip plug-in in the <head> of the html file (the JavaScript and CSS are the same - only in subfolders.

The code I've added in the header is:

<script src="js/gsap.min.js" defer></script>
<script src="js/Flip.js" defer></script> 
<script src="js/script.js" defer></script> 
I've tried adding a '.' (some online tutorials say you need this for a relative path), I've tried the script tag in the body, I've tried the order of the scripts and not defering them etc.  I'm using MS Expression as an editor - but that shouldn't make any difference (I don't think).

Thanks

Andy

PS: In a way it aplies to other tutorials (for exampe TextPlugin with no working results so I think it might be my way of adding the plugin javascript. MS Expression can see the file and I've kept the naming the same btw).

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Yeah I used the code you posted, but I replaced the files with the CDN links. Any particular reason for not using the CDN links?

 

When you use the files you download, you have to use the files in either the minified or src folders. Don't use the files from the ESM or UMD folders if you are using that approach.

 

Finally if you're trying to use the example from the GreenSock collection, fork it and apply the changes you want to make. Codepen has a free account tier that allows you to create fully working codepens.

 

Let us know if you have more questions.

 

Happy Tweening!

  • Like 1
Link to comment
Share on other sites
AndyWhite007 test

AndyWhite007

Posted
  • Author
Posted

Hi Rodrigo,

Thanks a lot! It's working :- )

In summary

If I use the link directly for the plugin: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/Flip.js"></script>     then it works!  The Flip.js file I downloaded (included in the GSAP libraries) looks completly different when I compare it to the JavaScript in the URL above.

Quick note:

- If I copy the JS from the URL into a local file and then reference it in the html then it also works fine.

- The reason I'm trying to do a simple 'localised' version (i.e. all the JS/CSS files 'contained' locally to the webpage) is to allow offline functionality. A wierd requirement I know but it's for a reason ;- )

- Final question: But I downloaded 'gsap-member.zip' (from GSAP home page) to compare the plugins (from my original gsap-public.zip). I couldn't see a difference.  How do I reference either the latest CDN links or a 'hack' to see a list of the files available?  Does CDN make files obsolete after a number years?

Anyrate - thanks again!

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

In fact it shouldn't be a difference in the content between those two ZIP files you downloaded.

 

If my memory doesn't fail, I believe that at some point CDNs stopped serving latest files because of compatibility issues. Imagine you are using version 2 of Super Library, everything is going great. Then the creators of Super Library decide to make a few changes in their API so they release a completely new 3.x version that includes some breaking changes compared to the latest 2.x versions. If you have the link to the latest file and all of the sudden your app/site simply stops working and you have to find out that the version switched automatically. Also using latest does not help when it comes to caching the files hosted by CDNs.

 

Finally I don't think that CDNs put some sort of removal date for a specific library. If you check GSAP on CDNJS, you'll see that version 1.8.0 is still there, which I believe was the first version hosted on CDNJS on 2013! so I think is safe to say that the current version is going to be there for some time ;) 

 

Let us know if you have more questions.

 

Happy Tweening!

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
 Share
Go to topic listing

  • Recently Browsing   0 members

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