SlideShare a Scribd company logo
1 of 14
Animate any
Module Introduction
By - Viraj Rajankar
About ME
Viraj Rajankar
Software Developer
Iksula Services,
Indore
Introduction
Animate Any is an easy way to integrate the bunch of cool and
cross-browser animations to your DRUPAL website.
The concept was originated from one of the iksula project called
“Dasra”.
We implemented some animation on Dasra website which created some
complexity while writing code for it, so that I have decided to
make it flexible for all users by writing Animate Any.
It uses animate.css library which provides various animations.
Download Source : https://www.drupal.org/project/animate_any
View Source : http://cgit.drupalcode.org/animate_any/tree
why the module was needed ?
Animation is best part to give the extra edge to make a website more
interesting and interactive.
There are already 3 modules available on www.drupal.org which is as
follows.
Animate CSS
Animations
Block Animate
Animate any module is different from all above modules. It can add
animations to each and every section in drupal website.
what does the module do ?
By using “Animate Any” module, we can add various types of
animations to anywhere in Drupal website.
Animate any gives you a flexible backend so that user can add
animation along with selector.
You can check preview for each animation by selecting animation class
from select list.
who can benefit from it ?
This will be suitable for all the users who knows basic HTML.
Total backend is provided to user which is help you to add animation
by inserting selectors and you can also watch live animation by
selecting animation from list.
technical challenges / learnings.
Contribution to Drupal.org
Drupal 8 symphony structure
best practices for designing and building a module.
We have followed coding standard for D7 and D8.
Naming convention
Module Page template
Readme.txt file
Pareview.sh
Demo
http://dev-animate-any.pantheonsite.io/
Enhancement
WOW.js (style, delay, length, offset)
JS events .
Animation update feature.
ANy Questions ??
For more information read this blog :
http://www.faichi.com/blog/how-implement-animate-any-module-drupal-8
Special Thanks:
● Ashish Dalvi
● Yash Khandelwal
● Amit Gupta
You can reach me on :
viraj.r@iksula.com
+91 9637282726
Thank You !

More Related Content

What's hot

What's hot (8)

Twitter Bootstrap
Twitter BootstrapTwitter Bootstrap
Twitter Bootstrap
 
Sitecore responsive website imagery support
Sitecore responsive website imagery supportSitecore responsive website imagery support
Sitecore responsive website imagery support
 
Hangman game - AI Powered and in Python
Hangman game - AI Powered and in PythonHangman game - AI Powered and in Python
Hangman game - AI Powered and in Python
 
Using Featured Images with WordPress
Using Featured Images with WordPressUsing Featured Images with WordPress
Using Featured Images with WordPress
 
Ecommerce Mini Project / Group Project Design
Ecommerce Mini Project / Group Project DesignEcommerce Mini Project / Group Project Design
Ecommerce Mini Project / Group Project Design
 
Interactive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CCInteractive Animation with Adobe Animate CC
Interactive Animation with Adobe Animate CC
 
00254
0025400254
00254
 
Web Development
Web DevelopmentWeb Development
Web Development
 

Similar to Animate any - introduction

CreativeEssentials_0503
CreativeEssentials_0503CreativeEssentials_0503
CreativeEssentials_0503
tutorialsruby
 
CreativeEssentials_0503
CreativeEssentials_0503CreativeEssentials_0503
CreativeEssentials_0503
tutorialsruby
 
Sixth evaluation
Sixth evaluationSixth evaluation
Sixth evaluation
014395
 
6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf
Be Problem Solver
 

Similar to Animate any - introduction (20)

Drupal
DrupalDrupal
Drupal
 
Drawing Tool
Drawing ToolDrawing Tool
Drawing Tool
 
Resume subbu addanki
Resume subbu addankiResume subbu addanki
Resume subbu addanki
 
Rich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScriptRich Media Advertising with SVG and JavaScript
Rich Media Advertising with SVG and JavaScript
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Startup Institute NYC: Styling
Startup Institute NYC: StylingStartup Institute NYC: Styling
Startup Institute NYC: Styling
 
CreativeEssentials_0503
CreativeEssentials_0503CreativeEssentials_0503
CreativeEssentials_0503
 
CreativeEssentials_0503
CreativeEssentials_0503CreativeEssentials_0503
CreativeEssentials_0503
 
Sixth evaluation
Sixth evaluationSixth evaluation
Sixth evaluation
 
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to DevelopmentWordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
WordCamp Greenville 2018 - Beware the Dark Side, or an Intro to Development
 
All about TemplateToaster and its Features
All about TemplateToaster and its FeaturesAll about TemplateToaster and its Features
All about TemplateToaster and its Features
 
Drupal A non technical Introduction
Drupal A non technical IntroductionDrupal A non technical Introduction
Drupal A non technical Introduction
 
Flutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - textFlutter vs Java Graphical User Interface Frameworks - text
Flutter vs Java Graphical User Interface Frameworks - text
 
EPiImage
EPiImageEPiImage
EPiImage
 
Introduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJsIntroduction to html5 game programming with ImpactJs
Introduction to html5 game programming with ImpactJs
 
Streamlined CMS - DrupalCon Session
Streamlined CMS - DrupalCon SessionStreamlined CMS - DrupalCon Session
Streamlined CMS - DrupalCon Session
 
6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf6 Methods to use page scroll animation.pdf
6 Methods to use page scroll animation.pdf
 
Client Building Functional webapps.
Client   Building Functional webapps.Client   Building Functional webapps.
Client Building Functional webapps.
 
Adobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another LookAdobe MAX 2015 - Giving Flash Professional Another Look
Adobe MAX 2015 - Giving Flash Professional Another Look
 
Comparison between articulate storyline & adobe captivate
Comparison between articulate storyline & adobe captivateComparison between articulate storyline & adobe captivate
Comparison between articulate storyline & adobe captivate
 

Recently uploaded

Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
Biography Of Angeliki Cooney | Senior Vice President Life Sciences | Albany, ...
 
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUKSpring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 

Animate any - introduction

  • 2. About ME Viraj Rajankar Software Developer Iksula Services, Indore
  • 3. Introduction Animate Any is an easy way to integrate the bunch of cool and cross-browser animations to your DRUPAL website. The concept was originated from one of the iksula project called “Dasra”. We implemented some animation on Dasra website which created some complexity while writing code for it, so that I have decided to make it flexible for all users by writing Animate Any. It uses animate.css library which provides various animations. Download Source : https://www.drupal.org/project/animate_any View Source : http://cgit.drupalcode.org/animate_any/tree
  • 4. why the module was needed ? Animation is best part to give the extra edge to make a website more interesting and interactive. There are already 3 modules available on www.drupal.org which is as follows. Animate CSS Animations Block Animate Animate any module is different from all above modules. It can add animations to each and every section in drupal website.
  • 5. what does the module do ? By using “Animate Any” module, we can add various types of animations to anywhere in Drupal website.
  • 6. Animate any gives you a flexible backend so that user can add animation along with selector. You can check preview for each animation by selecting animation class from select list.
  • 7. who can benefit from it ? This will be suitable for all the users who knows basic HTML. Total backend is provided to user which is help you to add animation by inserting selectors and you can also watch live animation by selecting animation from list.
  • 8. technical challenges / learnings. Contribution to Drupal.org Drupal 8 symphony structure
  • 9. best practices for designing and building a module. We have followed coding standard for D7 and D8. Naming convention Module Page template Readme.txt file Pareview.sh
  • 11. Enhancement WOW.js (style, delay, length, offset) JS events . Animation update feature.
  • 13. For more information read this blog : http://www.faichi.com/blog/how-implement-animate-any-module-drupal-8 Special Thanks: ● Ashish Dalvi ● Yash Khandelwal ● Amit Gupta You can reach me on : viraj.r@iksula.com +91 9637282726