Introducerar ScrollMagic 2.0

Om du är desperat att skapa vackra rullningsanimationer i ditt nästa projekt, titta inte längre. ScrollMagic är ett JavaScript-bibliotek som hjälper dig att skapa "magiska" rullningsinteraktioner som enkelt reagerar på användarens aktuella rullningsläge och trigger-animeringar eller synkroniserade händelser. 

ScrollMagic har nyligen genomgått några stora förändringar, så här är en snabb genomgång som diskuterar förändringarna och förbättringarna sedan dess återfödelse.

ScrollMagic hemsida

Vad är nytt?

Beroenden som en gång var kärnkomponenter i ScrollMagic, som GreenSock (GSAP) och jQuery, har tagits bort helt från biblioteket. Från 2.0.0 allt som lägger till funktioner överst av ScrollMagic behandlas som ett plugin, slutligen gör ScrollMagic ett fristående bibliotek (6KB gzipped)! 

Changelog innehåller många andra fasetter som har anpassats, om du väljer att dyka djupare. Om du inte har tid, här är en lista som markerar några av ändringarna:

1. Avlägsnande av beroenden och införande av plugins
2. Controllers är nu instantiated med ScrollMagic.Controller ()
3. Scener definieras nu som ScrollMagic.Scene ()
4. Borttagning av triggerOffset
5. Borttagning av pinClass (detta kan uppnås med setClassToggle i 2,0)
6. pushfollowers standardvärdet är inställt på falsk
7. Nya händelser: Lägg till och ta bort
8. omdöpt .förälder till .kontrollant
9. Debug extension förlängs till plugins / scene.addIndicators och kan läggas till före regulatorn och fungerar även när scenerna tas bort och läggs till igen.
10. Ny metod removeIndicators

Prestanda Tweaks

Prestanda tweaks förbättra hastigheten på ScrollMagic föreslogs av Paul Irish när det gäller att uppdatera RAF (request animation frame). I stället för att lyssna direkt på rullningsevenemanget användes en teknik som kallades "debouncing" ursprungligen. Det betyder att allt som ska utföras på Scroll faktiskt exekveras i en timeout (fördröjning). När onScroll hade blivit utlöst var det enda som förändrats var en variabel som wasScrolled = true och inspekteras i timeout-funktionen. Ursprungligen blev debounce-funktionen kallad RAF och ständigt letad efter wasScrolled Var i en slinga. 

Nu, istället för en slinga, är det bara schemaläggning att kolla på nästa RAF när en rullningshändelse utlöses. Allt detta innebär att när ingen rullning händer, körs ingen slinga!

Responsiva Durations

Responsiva varaktigheter måste vara en av mina favoritförbättringar till biblioteket förutom prestationsförstärkningarna. De Scen Varaktighet kan nu acceptera en procentuell sträng som "100%". Rullningen kommer att beräknas i förhållande till storleken på rullens behållare. ScrollMagic kommer att använda behållarens höjd för vertikalt rullande system och dess bredd för horisontellt rullande behållare.

var scene = ny ScrollMagic.Scene (duration: "100%");

Skriptläsning

Scriptorder är ganska annorlunda nu, eftersom bibliotek som GSAP har separerats i motsats till att vara en del av ScrollMagic-kärnan. Detta innebär att när som helst du vill ha ett bibliotek som TweenMax måste du ladda huvud GSAP-biblioteket först, följt av kärnan ScrollMagic lib, och äntligen det ScrollMagic-plugin du har valt. 

Kom ihåg att alltid ladda huvud GSAP-biblioteket först, sedan ScrollMagic plugins.

Skriptanropet för GSAP-plugin är ScrollMagics nya plugin som innehåller GSAP-tweenfunktionen som tidigare integrerades i ScrollMagic. Jan har också integrerat hastocity.js för dem som inte önskar den funktion som GSAP tillhandahåller.

Definiera Controllers

En kontroller är ett sätt att "kontrollera scener". Det är en klass som behövs en gång per rullbehållare och skrivs något annorlunda i 2,0.

Låt oss jämföra hur kontrollerare instantieras nu, med hur de var i den gamla versionen:

Gamla sättet

var controller = ny ScrollMagic ();

Nytt sätt

var controller = ny ScrollMagic.Controller ();

scener

Platsen är platsen för din rörelse / animation. Det definierar var regulatorn ska reagera och hur. Det är också ett annat exempel på var syntaxen har förändrats något.

Gamla sättet

var scene = ny ScrollScene (triggerElement: "# pinned-trigger", duration: $ (fönster) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (kontrollant);

Nytt sätt

var scene = ny ScrollMagic.Scene (triggerElement: "# pinned-trigger", duration: $ (fönster) .height () - 100, triggerHook: 0, reverse: true) .setPin ("# pinned-element") .addTo (controller);

Uppdateringstips

När jag pratade med ScrollMagics skapare Jan Paepke lärde jag mig en fantastisk tidsbesparande tips för att migrera från din gamla ScrollMagic-kod till den nya

1. Först utföra en "Sök och ersätt" i din textredigerare för "ScrollMagic"Och ersätt strängen med"SM_TMP"I alla dina filer. 
2. Nästa ersätt "ScrollScene"Med"ScrollMagic.Scene”.
3. Slutligen, ersätt "SM_TMP"Med"ScrollMagic.Controller”.

Notera: Se till att du inte inkluderar ScrollMagics källfiler i din sökning, bara tillämpa den på din egen kod. Det är ett extra steg, men är säkrare eftersom det finns situationer där du kan ha mellanslag innan parenteserna.

Dokumentation

Om du behöver hjälp med ScrollMagic kan du kolla på min CodePen-samling som används för WIKI-delen i ScrollMagic repo. WIKI har också stora förklaringar, tillsammans med demo som finns i exemplet på den officiella ScrollMagic-webbplatsen:

Nu gör du fantastiska rullningsanimationer för ditt projekt!