Animate It! - Version 2.3.0

Version Description

Download this release

Release Info

Developer eleopard
Plugin Icon 128x128 Animate It!
Version 2.3.0
Comparing to
See all releases

Code changes from version 2.2.1 to 2.3.0

assets/css/animate-animo.css CHANGED
@@ -4475,4 +4475,799 @@ Daniel Raftery <@ThirvingKings>
4475
  -webkit-animation-play-state: paused;
4476
  animation-play-state: paused;
4477
  }
4478
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4475
  -webkit-animation-play-state: paused;
4476
  animation-play-state: paused;
4477
  }
4478
+
4479
+ /* originally authored by Ian Lunn - https://github.com/IanLunn */
4480
+
4481
+ /* Grow */
4482
+ @-webkit-keyframes grow {
4483
+ 100% { -webkit-transform: scale(1.1); }
4484
+ }
4485
+
4486
+ @-moz-keyframes grow {
4487
+ 100% { -moz-transform: scale(1.1); }
4488
+ }
4489
+
4490
+ @-o-keyframes grow {
4491
+ 100% { -o-transform: scale(1.1); }
4492
+ }
4493
+
4494
+ @keyframes grow {
4495
+ 100% { transform: scale(1.1); }
4496
+ }
4497
+
4498
+ .animated.grow {
4499
+ -webkit-animation-name: grow;
4500
+ -moz-animation-name: grow;
4501
+ -o-animation-name: grow;
4502
+ animation-name: grow;
4503
+ }
4504
+
4505
+ /* Shrink */
4506
+ @-webkit-keyframes shrink {
4507
+ 100% { -webkit-transform: scale(0.9); }
4508
+ }
4509
+
4510
+ @-moz-keyframes shrink {
4511
+ 100% { -moz-transform: scale(0.9); }
4512
+ }
4513
+
4514
+ @-o-keyframes shrink {
4515
+ 100% { -o-transform: scale(0.9); }
4516
+ }
4517
+
4518
+ @keyframes shrink {
4519
+ 100% { transform: scale(0.9); }
4520
+ }
4521
+
4522
+ .animated.shrink {
4523
+ -webkit-animation-name: shrink;
4524
+ -moz-animation-name: shrink;
4525
+ -o-animation-name: shrink;
4526
+ animation-name: shrink;
4527
+ }
4528
+
4529
+ /* Pulse Grow */
4530
+ @-webkit-keyframes pulseGrow {
4531
+ 0% { -webkit-transform: scale(1.1); }
4532
+ }
4533
+
4534
+ @-moz-keyframes pulseGrow {
4535
+ 0% { -moz-transform: scale(1.1); }
4536
+ }
4537
+
4538
+ @-o-keyframes pulseGrow {
4539
+ 0% { -o-transform: scale(1.1); }
4540
+ }
4541
+
4542
+ @keyframes pulseGrow {
4543
+ 0% { transform: scale(1.1); }
4544
+ }
4545
+
4546
+ .animated.pulseGrow {
4547
+ -webkit-animation-iteration-count: infinite;
4548
+ -moz-animation-iteration-count: infinite;
4549
+ -o-animation-iteration-count: infinite;
4550
+ animation-iteration-count: infinite;
4551
+ -webkit-animation-direction: alternate;
4552
+ -moz-animation-direction: alternate;
4553
+ -o-animation-direction: alternate;
4554
+ animation-direction: alternate;
4555
+ -webkit-animation-name: pulseGrow;
4556
+ -moz-animation-name: pulseGrow;
4557
+ -o-animation-name: pulseGrow;
4558
+ animation-name: pulseGrow;
4559
+ }
4560
+
4561
+ /* Pulse Shrink */
4562
+ @-webkit-keyframes pulseShrink {
4563
+ 0% { -webkit-transform: scale(0.9); }
4564
+ }
4565
+
4566
+ @-moz-keyframes pulseShrink {
4567
+ 0% { -moz-transform: scale(0.9); }
4568
+ }
4569
+
4570
+ @-o-keyframes pulseShrink {
4571
+ 0% { -o-transform: scale(0.9); }
4572
+ }
4573
+
4574
+ @keyframes pulseShrink {
4575
+ 0% { transform: scale(0.9); }
4576
+ }
4577
+
4578
+ .animated.pulseShrink {
4579
+ -webkit-animation-iteration-count: infinite;
4580
+ -moz-animation-iteration-count: infinite;
4581
+ -o-animation-iteration-count: infinite;
4582
+ animation-iteration-count: infinite;
4583
+ -webkit-animation-direction: alternate;
4584
+ -moz-animation-direction: alternate;
4585
+ -o-animation-direction: alternate;
4586
+ animation-direction: alternate;
4587
+ -webkit-animation-name: pulseShrink;
4588
+ -moz-animation-name: pulseShrink;
4589
+ -o-animation-name: pulseShrink;
4590
+ animation-name: pulseShrink;
4591
+ }
4592
+
4593
+ /* Push */
4594
+ @-webkit-keyframes push {
4595
+ 50% { -webkit-transform: scale(0.8); }
4596
+ 100% { -webkit-transform: scale(1); }
4597
+ }
4598
+
4599
+ @-moz-keyframes push {
4600
+ 50% { -moz-transform: scale(0.8); }
4601
+ 100% { -moz-transform: scale(1); }
4602
+ }
4603
+
4604
+ @-o-keyframes push {
4605
+ 50% { -o-transform: scale(0.8); }
4606
+ 100% { -o-transform: scale(1); }
4607
+ }
4608
+
4609
+ @keyframes push {
4610
+ 50% { transform: scale(0.8); }
4611
+ 100% { transform: scale(1); }
4612
+ }
4613
+
4614
+ .animated.push {
4615
+ -webkit-animation-name: push;
4616
+ -moz-animation-name: push;
4617
+ -o-animation-name: push;
4618
+ animation-name: push;
4619
+ }
4620
+
4621
+ /* Pop */
4622
+ @-webkit-keyframes pop {
4623
+ 50% { -webkit-transform: scale(1.2); }
4624
+ }
4625
+
4626
+ @-moz-keyframes pop {
4627
+ 50% { -moz-transform: scale(1.2); }
4628
+ }
4629
+
4630
+ @-o-keyframes pop {
4631
+ 50% { -o-transform: scale(1.2); }
4632
+ }
4633
+
4634
+ @keyframes pop {
4635
+ 50% { transform: scale(1.2); }
4636
+ }
4637
+
4638
+ .animated.pop {
4639
+ -webkit-animation-name: pop;
4640
+ -moz-animation-name: pop;
4641
+ -o-animation-name: pop;
4642
+ animation-name: pop;
4643
+ }
4644
+
4645
+ /* Rotate */
4646
+ @-webkit-keyframes rotate {
4647
+ 100% { -webkit-transform: rotate(60deg); }
4648
+ }
4649
+
4650
+ @-moz-keyframes rotate {
4651
+ 100% { -moz-transform: rotate(60deg); }
4652
+ }
4653
+
4654
+ @-o-keyframes rotate {
4655
+ 100% { -o-transform: rotate(60deg); }
4656
+ }
4657
+
4658
+ @keyframes rotate {
4659
+ 100% { transform: rotate(60deg); }
4660
+ }
4661
+
4662
+ .animated.rotate {
4663
+ -webkit-animation-name: rotate;
4664
+ -moz-animation-name: rotate;
4665
+ -o-animation-name: rotate;
4666
+ animation-name: rotate;
4667
+ }
4668
+
4669
+ /* Grow Rotate */
4670
+ @-webkit-keyframes growRotate {
4671
+ 100% { -webkit-transform: scale(1.1) rotate(60deg); }
4672
+ }
4673
+
4674
+ @-moz-keyframes growRotate {
4675
+ 100% { -moz-transform: scale(1.1) rotate(60deg); }
4676
+ }
4677
+
4678
+ @-o-keyframes growRotate {
4679
+ 100% { -o-transform: scale(1.1) rotate(60deg); }
4680
+ }
4681
+
4682
+ @keyframes growRotate {
4683
+ 100% { transform: scale(1.1) rotate(60deg); }
4684
+ }
4685
+
4686
+ .animated.growRotate {
4687
+ -webkit-animation-name: growRotate;
4688
+ -moz-animation-name: growRotate;
4689
+ -o-animation-name: growRotate;
4690
+ animation-name: growRotate;
4691
+ }
4692
+
4693
+ /* Float */
4694
+ @-webkit-keyframes float {
4695
+ 100% { -webkit-transform: translateY(-8px); }
4696
+ }
4697
+
4698
+ @-moz-keyframes float {
4699
+ 100% { -moz-transform: translateY(-8px); }
4700
+ }
4701
+
4702
+ @-o-keyframes float {
4703
+ 100% { -o-transform: translateY(-8px); }
4704
+ }
4705
+
4706
+ @keyframes float {
4707
+ 100% { transform: translateY(-8px); }
4708
+ }
4709
+
4710
+ .animated.float {
4711
+ -webkit-animation-name: float;
4712
+ -moz-animation-name: float;
4713
+ -o-animation-name: float;
4714
+ animation-name: float;
4715
+ }
4716
+
4717
+ /* Sink */
4718
+ @-webkit-keyframes sink {
4719
+ 100% { -webkit-transform: translateY(8px); }
4720
+ }
4721
+
4722
+ @-moz-keyframes sink {
4723
+ 100% { -moz-transform: translateY(8px); }
4724
+ }
4725
+
4726
+ @-o-keyframes sink {
4727
+ 100% { -o-transform: translateY(8px); }
4728
+ }
4729
+
4730
+ @keyframes sink {
4731
+ 100% { transform: translateY(8px); }
4732
+ }
4733
+
4734
+ .animated.sink {
4735
+ -webkit-animation-name: sink;
4736
+ -moz-animation-name: sink;
4737
+ -o-animation-name: sink;
4738
+ animation-name: sink;
4739
+ }
4740
+
4741
+ /* Skew */
4742
+ @-webkit-keyframes skew {
4743
+ 100% { -webkit-transform: skew(-10deg); }
4744
+ }
4745
+
4746
+ @-moz-keyframes skew {
4747
+ 100% { -moz-transform: skew(-10deg); }
4748
+ }
4749
+
4750
+ @-o-keyframes skew {
4751
+ 100% { -o-transform: skew(-10deg); }
4752
+ }
4753
+
4754
+ @keyframes skew {
4755
+ 100% { transform: skew(-10deg); }
4756
+ }
4757
+
4758
+ .animated.skew {
4759
+ -webkit-animation-name: skew;
4760
+ -moz-animation-name: skew;
4761
+ -o-animation-name: skew;
4762
+ animation-name: skew;
4763
+ }
4764
+
4765
+ /* Skew Forward */
4766
+ @-webkit-keyframes skewForward {
4767
+ 100% { -webkit-transform: skew(-10deg); }
4768
+ }
4769
+
4770
+ @-moz-keyframes skewForward {
4771
+ 100% { -moz-transform: skew(-10deg); }
4772
+ }
4773
+
4774
+ @-o-keyframes skewForward {
4775
+ 100% { -o-transform: skew(-10deg); }
4776
+ }
4777
+
4778
+ @keyframes skewForward {
4779
+ 100% { transform: skew(-10deg); }
4780
+ }
4781
+
4782
+ .animated.skewForward {
4783
+ -webkit-transform-origin: 0 100%;
4784
+ -moz-transform-origin: 0 100%;
4785
+ -o-transform-origin: 0 100%;
4786
+ transform-origin: 0 100%;
4787
+ -webkit-animation-name: skewForward;
4788
+ -moz-animation-name: skewForward;
4789
+ -o-animation-name: skewForward;
4790
+ animation-name: skewForward;
4791
+ }
4792
+
4793
+ /* Skew Backward */
4794
+ @-webkit-keyframes skewBackward {
4795
+ 100% { -webkit-transform: skew(10deg); }
4796
+ }
4797
+
4798
+ @-moz-keyframes skewBackward {
4799
+ 100% { -moz-transform: skew(10deg); }
4800
+ }
4801
+
4802
+ @-o-keyframes skewBackward {
4803
+ 100% { -o-transform: skew(10deg); }
4804
+ }
4805
+
4806
+ @keyframes skewBackward {
4807
+ 100% { transform: skew(10deg); }
4808
+ }
4809
+
4810
+ .animated.skewBackward {
4811
+ -webkit-transform-origin: 0 100%;
4812
+ -moz-transform-origin: 0 100%;
4813
+ -o-transform-origin: 0 100%;
4814
+ transform-origin: 0 100%;
4815
+ -webkit-animation-name: skewBackward;
4816
+ -moz-animation-name: skewBackward;
4817
+ -o-animation-name: skewBackward;
4818
+ animation-name: skewBackward;
4819
+ }
4820
+
4821
+ /* Wobble Vertical */
4822
+ @-webkit-keyframes wobbleVertical {
4823
+ 16.65% { -webkit-transform: translateY(8px); }
4824
+ 33.3% { -webkit-transform: translateY(-6px); }
4825
+ 49.95% { -webkit-transform: translateY(4px); }
4826
+ 66.6% { -webkit-transform: translateY(-2px); }
4827
+ 83.25% { -webkit-transform: translateY(1px); }
4828
+ 100% { -webkit-transform: translateY(0); }
4829
+ }
4830
+
4831
+ @-moz-keyframes wobbleVertical {
4832
+ 16.65% { -moz-transform: translateY(8px); }
4833
+ 33.3% { -moz-transform: translateY(-6px); }
4834
+ 49.95% { -moz-transform: translateY(4px); }
4835
+ 66.6% { -moz-transform: translateY(-2px); }
4836
+ 83.25% { -moz-transform: translateY(1px); }
4837
+ 100% { -moz-transform: translateY(0); }
4838
+ }
4839
+
4840
+ @-o-keyframes wobbleVertical {
4841
+ 16.65% { -o-transform: translateY(8px); }
4842
+ 33.3% { -o-transform: translateY(-6px); }
4843
+ 49.95% { -o-transform: translateY(4px); }
4844
+ 66.6% { -o-transform: translateY(-2px); }
4845
+ 83.25% { -o-transform: translateY(1px); }
4846
+ 100% { -o-transform: translateY(0); }
4847
+ }
4848
+
4849
+ @keyframes wobbleVertical {
4850
+ 16.65% { transform: translateY(8px); }
4851
+ 33.3% { transform: translateY(-6px); }
4852
+ 49.95% { transform: translateY(4px); }
4853
+ 66.6% { transform: translateY(-2px); }
4854
+ 83.25% { transform: translateY(1px); }
4855
+ 100% { transform: translateY(0); }
4856
+ }
4857
+
4858
+ .animated.wobbleVertical {
4859
+ -webkit-animation-name: wobbleVertical;
4860
+ -moz-animation-name: wobbleVertical;
4861
+ -o-animation-name: wobbleVertical;
4862
+ animation-name: wobbleVertical;
4863
+ }
4864
+
4865
+ /* Wobble Horizontal */
4866
+ @-webkit-keyframes wobbleHorizontal {
4867
+ 16.65% { -webkit-transform: translateX(8px); }
4868
+ 33.3% { -webkit-transform: translateX(-6px); }
4869
+ 49.95% { -webkit-transform: translateX(4px); }
4870
+ 66.6% { -webkit-transform: translateX(-2px); }
4871
+ 83.25% { -webkit-transform: translateX(1px); }
4872
+ 100% { -webkit-transform: translateX(0); }
4873
+ }
4874
+
4875
+ @-moz-keyframes wobbleHorizontal {
4876
+ 16.65% { -moz-transform: translateX(8px); }
4877
+ 33.3% { -moz-transform: translateX(-6px); }
4878
+ 49.95% { -moz-transform: translateX(4px); }
4879
+ 66.6% { -moz-transform: translateX(-2px); }
4880
+ 83.25% { -moz-transform: translateX(1px); }
4881
+ 100% { -moz-transform: translateX(0); }
4882
+ }
4883
+
4884
+ @-o-keyframes wobbleHorizontal {
4885
+ 16.65% { -o-transform: translateX(8px); }
4886
+ 33.3% { -o-transform: translateX(-6px); }
4887
+ 49.95% { -o-transform: translateX(4px); }
4888
+ 66.6% { -o-transform: translateX(-2px); }
4889
+ 83.25% { -o-transform: translateX(1px); }
4890
+ 100% { -o-transform: translateX(0); }
4891
+ }
4892
+
4893
+ @keyframes wobbleHorizontal {
4894
+ 16.65% { transform: translateX(8px); }
4895
+ 33.3% { transform: translateX(-6px); }
4896
+ 49.95% { transform: translateX(4px); }
4897
+ 66.6% { transform: translateX(-2px); }
4898
+ 83.25% { transform: translateX(1px); }
4899
+ 100% { transform: translateX(0); }
4900
+ }
4901
+
4902
+ .animated.wobbleHorizontal {
4903
+ -webkit-animation-name: wobbleHorizontal;
4904
+ -moz-animation-name: wobbleHorizontal;
4905
+ -o-animation-name: wobbleHorizontal;
4906
+ animation-name: wobbleHorizontal;
4907
+ }
4908
+
4909
+ /* Wobble To Bottom Right */
4910
+ @-webkit-keyframes wobbleToBottomRight {
4911
+ 16.65% { -webkit-transform: translate(8px, 8px); }
4912
+ 33.3% { -webkit-transform: translate(-6px, -6px); }
4913
+ 49.95% { -webkit-transform: translate(4px, 4px); }
4914
+ 66.6% { -webkit-transform: translate(-2px, -2px); }
4915
+ 83.25% { -webkit-transform: translate(1px, 1px); }
4916
+ 100% { -webkit-transform: translate(0, 0); }
4917
+ }
4918
+
4919
+ @-moz-keyframes wobbleToBottomRight {
4920
+ 16.65% { -moz-transform: translate(8px, 8px); }
4921
+ 33.3% { -moz-transform: translate(-6px, -6px); }
4922
+ 49.95% { -moz-transform: translate(4px, 4px); }
4923
+ 66.6% { -moz-transform: translate(-2px, -2px); }
4924
+ 83.25% { -moz-transform: translate(1px, 1px); }
4925
+ 100% { -moz-transform: translate(0, 0); }
4926
+ }
4927
+
4928
+ @-o-keyframes wobbleToBottomRight {
4929
+ 16.65% { -o-transform: translate(8px, 8px); }
4930
+ 33.3% { -o-transform: translate(-6px, -6px); }
4931
+ 49.95% { -o-transform: translate(4px, 4px); }
4932
+ 66.6% { -o-transform: translate(-2px, -2px); }
4933
+ 83.25% { -o-transform: translate(1px, 1px); }
4934
+ 100% { -o-transform: translate(0, 0); }
4935
+ }
4936
+
4937
+ @keyframes wobbleToBottomRight {
4938
+ 16.65% { transform: translate(8px, 8px); }
4939
+ 33.3% { transform: translate(-6px, -6px); }
4940
+ 49.95% { transform: translate(4px, 4px); }
4941
+ 66.6% { transform: translate(-2px, -2px); }
4942
+ 83.25% { transform: translate(1px, 1px); }
4943
+ 100% { transform: translate(0, 0); }
4944
+ }
4945
+
4946
+ .animated.wobbleToBottomRight {
4947
+ -webkit-animation-name: wobbleToBottomRight;
4948
+ -moz-animation-name: wobbleToBottomRight;
4949
+ -o-animation-name: wobbleToBottomRight;
4950
+ animation-name: wobbleToBottomRight;
4951
+ }
4952
+
4953
+ /* Wobble To Top Right */
4954
+ @-webkit-keyframes wobbleToTopRight {
4955
+ 16.65% { -webkit-transform: translate(8px, -8px); }
4956
+ 33.3% { -webkit-transform: translate(-6px, 6px); }
4957
+ 49.95% { -webkit-transform: translate(4px, -4px); }
4958
+ 66.6% { -webkit-transform: translate(-2px, 2px); }
4959
+ 83.25% { -webkit-transform: translate(1px, -1px); }
4960
+ 100% { -webkit-transform: translate(0, 0); }
4961
+ }
4962
+
4963
+ @-moz-keyframes wobbleToTopRight {
4964
+ 16.65% { -moz-transform: translate(8px, -8px); }
4965
+ 33.3% { -moz-transform: translate(-6px, 6px); }
4966
+ 49.95% { -moz-transform: translate(4px, -4px); }
4967
+ 66.6% { -moz-transform: translate(-2px, 2px); }
4968
+ 83.25% { -moz-transform: translate(1px, -1px); }
4969
+ 100% { -moz-transform: translate(0, 0); }
4970
+ }
4971
+
4972
+ @-o-keyframes wobbleToTopRight {
4973
+ 16.65% { -o-transform: translate(8px, -8px); }
4974
+ 33.3% { -o-transform: translate(-6px, 6px); }
4975
+ 49.95% { -o-transform: translate(4px, -4px); }
4976
+ 66.6% { -o-transform: translate(-2px, 2px); }
4977
+ 83.25% { -o-transform: translate(1px, -1px); }
4978
+ 100% { -o-transform: translate(0, 0); }
4979
+ }
4980
+
4981
+ @keyframes wobbleToTopRight {
4982
+ 16.65% { transform: translate(8px, -8px); }
4983
+ 33.3% { transform: translate(-6px, 6px); }
4984
+ 49.95% { transform: translate(4px, -4px); }
4985
+ 66.6% { transform: translate(-2px, 2px); }
4986
+ 83.25% { transform: translate(1px, -1px); }
4987
+ 100% { transform: translate(0, 0); }
4988
+ }
4989
+
4990
+ .animated.wobbleToTopRight {
4991
+ -webkit-animation-name: wobbleToTopRight;
4992
+ -moz-animation-name: wobbleToTopRight;
4993
+ -o-animation-name: wobbleToTopRight;
4994
+ animation-name: wobbleToTopRight;
4995
+ }
4996
+
4997
+ /* Wobble Top */
4998
+ @-webkit-keyframes wobbleTop {
4999
+ 16.65% { -webkit-transform: skew(-12deg); }
5000
+ 33.3% { -webkit-transform: skew(10deg); }
5001
+ 49.95% { -webkit-transform: skew(-6deg); }
5002
+ 66.6% { -webkit-transform: skew(4deg); }
5003
+ 83.25% { -webkit-transform: skew(-2deg); }
5004
+ 100% { -webkit-transform: skew(0); }
5005
+ }
5006
+
5007
+ @-moz-keyframes wobbleTop {
5008
+ 16.65% { -moz-transform: skew(-12deg); }
5009
+ 33.3% { -moz-transform: skew(10deg); }
5010
+ 49.95% { -moz-transform: skew(-6deg); }
5011
+ 66.6% { -moz-transform: skew(4deg); }
5012
+ 83.25% { -moz-transform: skew(-2deg); }
5013
+ 100% { -moz-transform: skew(0); }
5014
+ }
5015
+
5016
+ @-o-keyframes wobbleTop {
5017
+ 16.65% { -o-transform: skew(-12deg); }
5018
+ 33.3% { -o-transform: skew(10deg); }
5019
+ 49.95% { -o-transform: skew(-6deg); }
5020
+ 66.6% { -o-transform: skew(4deg); }
5021
+ 83.25% { -o-transform: skew(-2deg); }
5022
+ 100% { -o-transform: skew(0); }
5023
+ }
5024
+
5025
+ @keyframes wobbleTop {
5026
+ 16.65% { transform: skew(-12deg); }
5027
+ 33.3% { transform: skew(10deg); }
5028
+ 49.95% { transform: skew(-6deg); }
5029
+ 66.6% { transform: skew(4deg); }
5030
+ 83.25% { transform: skew(-2deg); }
5031
+ 100% { transform: skew(0); }
5032
+ }
5033
+
5034
+ .animated.wobbleTop {
5035
+ -webkit-transform-origin: 0 100%;
5036
+ -moz-transform-origin: 0 100%;
5037
+ -o-transform-origin: 0 100%;
5038
+ transform-origin: 0 100%;
5039
+ -webkit-animation-name: wobbleTop;
5040
+ -moz-animation-name: wobbleTop;
5041
+ -o-animation-name: wobbleTop;
5042
+ animation-name: wobbleTop;
5043
+ }
5044
+
5045
+ /* Wobble Bottom */
5046
+ @-webkit-keyframes wobbleBottom {
5047
+ 16.65% { -webkit-transform: skew(-12deg); }
5048
+ 33.3% { -webkit-transform: skew(10deg); }
5049
+ 49.95% { -webkit-transform: skew(-6deg); }
5050
+ 66.6% { -webkit-transform: skew(4deg); }
5051
+ 83.25% { -webkit-transform: skew(-2deg); }
5052
+ 100% { -webkit-transform: skew(0); }
5053
+ }
5054
+
5055
+ @-moz-keyframes wobbleBottom {
5056
+ 16.65% { -moz-transform: skew(-12deg); }
5057
+ 33.3% { -moz-transform: skew(10deg); }
5058
+ 49.95% { -moz-transform: skew(-6deg); }
5059
+ 66.6% { -moz-transform: skew(4deg); }
5060
+ 83.25% { -moz-transform: skew(-2deg); }
5061
+ 100% { -moz-transform: skew(0); }
5062
+ }
5063
+
5064
+ @-o-keyframes wobbleBottom {
5065
+ 16.65% { -o-transform: skew(-12deg); }
5066
+ 33.3% { -o-transform: skew(10deg); }
5067
+ 49.95% { -o-transform: skew(-6deg); }
5068
+ 66.6% { -o-transform: skew(4deg); }
5069
+ 83.25% { -o-transform: skew(-2deg); }
5070
+ 100% { -o-transform: skew(0); }
5071
+ }
5072
+
5073
+ @keyframes wobbleBottom {
5074
+ 16.65% { transform: skew(-12deg); }
5075
+ 33.3% { transform: skew(10deg); }
5076
+ 49.95% { transform: skew(-6deg); }
5077
+ 66.6% { transform: skew(4deg); }
5078
+ 83.25% { transform: skew(-2deg); }
5079
+ 100% { transform: skew(0); }
5080
+ }
5081
+
5082
+ .animated.wobbleBottom {
5083
+ -webkit-transform-origin: 100% 0;
5084
+ -moz-transform-origin: 100% 0;
5085
+ -o-transform-origin: 100% 0;
5086
+ transform-origin: 100% 0;
5087
+ -webkit-animation-name: wobbleBottom;
5088
+ -moz-animation-name: wobbleBottom;
5089
+ -o-animation-name: wobbleBottom;
5090
+ animation-name: wobbleBottom;
5091
+ }
5092
+
5093
+ /* Wobble Skew */
5094
+ @-webkit-keyframes wobbleSkew {
5095
+ 16.65% { -webkit-transform: skew(-12deg); }
5096
+ 33.3% { -webkit-transform: skew(10deg); }
5097
+ 49.95% { -webkit-transform: skew(-6deg); }
5098
+ 66.6% { -webkit-transform: skew(4deg); }
5099
+ 83.25% { -webkit-transform: skew(-2deg); }
5100
+ 100% { -webkit-transform: skew(0); }
5101
+ }
5102
+
5103
+ @-moz-keyframes wobbleSkew {
5104
+ 16.65% { -moz-transform: skew(-12deg); }
5105
+ 33.3% { -moz-transform: skew(10deg); }
5106
+ 49.95% { -moz-transform: skew(-6deg); }
5107
+ 66.6% { -moz-transform: skew(4deg); }
5108
+ 83.25% { -moz-transform: skew(-2deg); }
5109
+ 100% { -moz-transform: skew(0); }
5110
+ }
5111
+
5112
+ @-o-keyframes wobbleSkew {
5113
+ 16.65% { -o-transform: skew(-12deg); }
5114
+ 33.3% { -o-transform: skew(10deg); }
5115
+ 49.95% { -o-transform: skew(-6deg); }
5116
+ 66.6% { -o-transform: skew(4deg); }
5117
+ 83.25% { -o-transform: skew(-2deg); }
5118
+ 100% { -o-transform: skew(0); }
5119
+ }
5120
+
5121
+ @keyframes wobbleSkew {
5122
+ 16.65% { transform: skew(-12deg); }
5123
+ 33.3% { transform: skew(10deg); }
5124
+ 49.95% { transform: skew(-6deg); }
5125
+ 66.6% { transform: skew(4deg); }
5126
+ 83.25% { transform: skew(-2deg); }
5127
+ 100% { transform: skew(0); }
5128
+ }
5129
+
5130
+ .animated.wobbleSkew {
5131
+ -webkit-animation-name: wobbleSkew;
5132
+ -moz-animation-name: wobbleSkew;
5133
+ -o-animation-name: wobbleSkew;
5134
+ animation-name: wobbleSkew;
5135
+ }
5136
+
5137
+ /* Buzz */
5138
+ @-webkit-keyframes buzz {
5139
+ 50% { -webkit-transform: translateX(3px) rotate(2deg); }
5140
+ 100% { -webkit-transform: translateX(-3px) rotate(-2deg); }
5141
+ }
5142
+
5143
+ @-moz-keyframes buzz {
5144
+ 50% { -moz-transform: translateX(3px) rotate(2deg); }
5145
+ 100% { -moz-transform: translateX(-3px) rotate(-2deg); }
5146
+ }
5147
+
5148
+ @-o-keyframes buzz {
5149
+ 50% { -o-transform: translateX(3px) rotate(2deg); }
5150
+ 100% { -o-transform: translateX(-3px) rotate(-2deg); }
5151
+ }
5152
+
5153
+ @keyframes buzz {
5154
+ 50% { transform: translateX(3px) rotate(2deg); }
5155
+ 100% { transform: translateX(-3px) rotate(-2deg); }
5156
+ }
5157
+
5158
+ .animated.buzz {
5159
+ -webkit-animation-name: buzz;
5160
+ -moz-animation-name: buzz;
5161
+ -o-animation-name: buzz;
5162
+ animation-name: buzz;
5163
+ -webkit-animation-iteration-count: infinite;
5164
+ animation-iteration-count: infinite;
5165
+ }
5166
+
5167
+ /* Buzz Out */
5168
+ @-webkit-keyframes buzzOut {
5169
+ 10% { -webkit-transform: translateX(3px) rotate(2deg); }
5170
+ 20% { -webkit-transform: translateX(-3px) rotate(-2deg); }
5171
+ 30% { -webkit-transform: translateX(3px) rotate(2deg); }
5172
+ 40% { -webkit-transform: translateX(-3px) rotate(-2deg); }
5173
+ 50% { -webkit-transform: translateX(2px) rotate(1deg); }
5174
+ 60% { -webkit-transform: translateX(-2px) rotate(-1deg); }
5175
+ 70% { -webkit-transform: translateX(2px) rotate(1deg); }
5176
+ 80% { -webkit-transform: translateX(-2px) rotate(-1deg); }
5177
+ 90% { -webkit-transform: translateX(1px) rotate(0); }
5178
+ 100% { -webkit-transform: translateX(-1px) rotate(0); }
5179
+ }
5180
+
5181
+ @-moz-keyframes buzzOut {
5182
+ 10% { -moz-transform: translateX(3px) rotate(2deg); }
5183
+ 20% { -moz-transform: translateX(-3px) rotate(-2deg); }
5184
+ 30% { -moz-transform: translateX(3px) rotate(2deg); }
5185
+ 40% { -moz-transform: translateX(-3px) rotate(-2deg); }
5186
+ 50% { -moz-transform: translateX(2px) rotate(1deg); }
5187
+ 60% { -moz-transform: translateX(-2px) rotate(-1deg); }
5188
+ 70% { -moz-transform: translateX(2px) rotate(1deg); }
5189
+ 80% { -moz-transform: translateX(-2px) rotate(-1deg); }
5190
+ 90% { -moz-transform: translateX(1px) rotate(0); }
5191
+ 100% { -moz-transform: translateX(-1px) rotate(0); }
5192
+ }
5193
+
5194
+ @-o-keyframes buzzOut {
5195
+ 10% { -o-transform: translateX(3px) rotate(2deg); }
5196
+ 20% { -o-transform: translateX(-3px) rotate(-2deg); }
5197
+ 30% { -o-transform: translateX(3px) rotate(2deg); }
5198
+ 40% { -o-transform: translateX(-3px) rotate(-2deg); }
5199
+ 50% { -o-transform: translateX(2px) rotate(1deg); }
5200
+ 60% { -o-transform: translateX(-2px) rotate(-1deg); }
5201
+ 70% { -o-transform: translateX(2px) rotate(1deg); }
5202
+ 80% { -o-transform: translateX(-2px) rotate(-1deg); }
5203
+ 90% { -o-transform: translateX(1px) rotate(0); }
5204
+ 100% { -o-transform: translateX(-1px) rotate(0); }
5205
+ }
5206
+
5207
+ @keyframes buzzOut {
5208
+ 10% { transform: translateX(3px) rotate(2deg); }
5209
+ 20% { transform: translateX(-3px) rotate(-2deg); }
5210
+ 30% { transform: translateX(3px) rotate(2deg); }
5211
+ 40% { transform: translateX(-3px) rotate(-2deg); }
5212
+ 50% { transform: translateX(2px) rotate(1deg); }
5213
+ 60% { transform: translateX(-2px) rotate(-1deg); }
5214
+ 70% { transform: translateX(2px) rotate(1deg); }
5215
+ 80% { transform: translateX(-2px) rotate(-1deg); }
5216
+ 90% { transform: translateX(1px) rotate(0); }
5217
+ 100% { transform: translateX(-1px) rotate(0); }
5218
+ }
5219
+
5220
+ .animated.buzzOut {
5221
+ -webkit-animation-name: buzzOut;
5222
+ -moz-animation-name: buzzOut;
5223
+ -o-animation-name: buzzOut;
5224
+ animation-name: buzzOut;
5225
+ }
5226
+
5227
+ /* Forward */
5228
+ @-webkit-keyframes forward {
5229
+ 100% { -webkit-transform: translateX(8px); }
5230
+ }
5231
+
5232
+ @-moz-keyframes forward {
5233
+ 100% { -moz-transform: translateX(8px); }
5234
+ }
5235
+
5236
+ @-o-keyframes forward {
5237
+ 100% { -o-transform: translateX(8px); }
5238
+ }
5239
+
5240
+ @keyframes forward {
5241
+ 100% { transform: translateX(8px); }
5242
+ }
5243
+
5244
+ .animated.forward {
5245
+ -webkit-animation-name: forward;
5246
+ -moz-animation-name: forward;
5247
+ -o-animation-name: forward;
5248
+ animation-name: forward;
5249
+ }
5250
+
5251
+ /* Backward */
5252
+ @-webkit-keyframes backward {
5253
+ 100% { -webkit-transform: translateX(-8px); }
5254
+ }
5255
+
5256
+ @-moz-keyframes backward {
5257
+ 100% { -moz-transform: translateX(-8px); }
5258
+ }
5259
+
5260
+ @-o-keyframes backward {
5261
+ 100% { -o-transform: translateX(-8px); }
5262
+ }
5263
+
5264
+ @keyframes backward {
5265
+ 100% { transform: translateX(-8px); }
5266
+ }
5267
+
5268
+ .animated.backward {
5269
+ -webkit-animation-name: backward;
5270
+ -moz-animation-name: backward;
5271
+ -o-animation-name: backward;
5272
+ animation-name: backward;
5273
+ }
assets/css/blank.css ADDED
@@ -0,0 +1,2 @@
 
 
1
+ /*blank CSS just to create a handle for custom css file */
2
+ body{}
assets/helper/edsanimate-tinymce-popup.php CHANGED
@@ -1,748 +1,828 @@
1
- <?php
2
- $scroll_offset = get_option ( 'eds_scroll_offset', '75' );
3
- ?>
4
- <!doctype html>
5
- <html lang="en">
6
- <head>
7
- <meta charset="utf-8">
8
- <title><?php _e( 'Select your Animation Style', 'eds-animate' ); ?>:</title>
9
- <meta name="viewport"
10
- content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
11
- <link rel="stylesheet"
12
- href="<?php echo plugin_dir_url(__FILE__).'../css/animate-animo.css'; ?>" />
13
- <link rel="stylesheet"
14
- href="<?php echo plugin_dir_url(__FILE__).'../css/style.css'; ?>" />
15
- </head>
16
- <body
17
- onload="document.body.style.display='';"
18
- dir="ltr">
19
- <div class="modal edsai-wrapper">
20
- <div class="edaai-body">
21
- <div class="preview-badge">
22
- <span id="animationSandbox">
23
- <h1 class="site__title mega animateit-icon"></h1>
24
- </span>
25
- </div>
26
- <form name="edsanimate_form" id="edsanimate_form">
27
- <div class="edsai-form-wrapper">
28
- <div class="edsai-tabs">
29
- <div class="edsai-tab edsai-tab-active">
30
- <a class="edsai-tab-handler" href="#tab-entry"><?php _e( 'Entry', 'eds-animate' ); ?></a>
31
- </div>
32
- <div class="edsai-tab">
33
- <a class="edsai-tab-handler" href="#tab-exit"><?php _e( 'Exit', 'eds-animate' ); ?></a>
34
- </div>
35
- <div class="edsai-tab">
36
- <a class="edsai-tab-handler" href="#tab-options"><?php _e( 'Options', 'eds-animate' ); ?></a>
37
- </div>
38
- </div>
39
- <div id="tab-entry" class="edsai-tab-content edsai-entry"
40
- style="display: block;">
41
- <div class="edsai-form-control-wrapper">
42
- <label for="entry-animation-type"><?php _e( 'Animation', 'eds-animate' ); ?>:</label>
43
- <div class="edsai-form-control">
44
- <select id="entry-animation-type" name="entry-animation-type"
45
- class="full-size">
46
- <option value="none"><?php _e( 'None', 'eds-animate' ); ?></option>
47
- <optgroup label="Bouncing Entrances">
48
- <option value="bounceIn">bounceIn</option>
49
- <option value="bounceInDown">bounceInDown</option>
50
- <option value="bounceInLeft">bounceInLeft</option>
51
- <option value="bounceInRight">bounceInRight</option>
52
- <option value="bounceInUp">bounceInUp</option>
53
- </optgroup>
54
- <optgroup label="Fading Entrances">
55
- <option value="fadeIn" selected>fadeIn</option>
56
- <option value="fadeInDown">fadeInDown</option>
57
- <option value="fadeInDownBig">fadeInDownBig</option>
58
- <option value="fadeInLeft">fadeInLeft</option>
59
- <option value="fadeInLeftBig">fadeInLeftBig</option>
60
- <option value="fadeInRight">fadeInRight</option>
61
- <option value="fadeInRightBig">fadeInRightBig</option>
62
- <option value="fadeInUp">fadeInUp</option>
63
- <option value="fadeInUpBig">fadeInUpBig</option>
64
- </optgroup>
65
- <optgroup label="Rotating Entrances">
66
- <option value="rotateIn">rotateIn</option>
67
- <option value="rotateInDownLeft">rotateInDownLeft</option>
68
- <option value="rotateInDownRight">rotateInDownRight</option>
69
- <option value="rotateInUpLeft">rotateInUpLeft</option>
70
- <option value="rotateInUpRight">rotateInUpRight</option>
71
- </optgroup>
72
- <optgroup label="Sliding Entrances">
73
- <option value="slideInUp">slideInUp</option>
74
- <option value="slideInDown">slideInDown</option>
75
- <option value="slideInLeft">slideInLeft</option>
76
- <option value="slideInRight">slideInRight</option>
77
- </optgroup>
78
- <optgroup label="Zoom Entrances">
79
- <option value="zoomIn">zoomIn</option>
80
- <option value="zoomInDown">zoomInDown</option>
81
- <option value="zoomInLeft">zoomInLeft</option>
82
- <option value="zoomInRight">zoomInRight</option>
83
- <option value="zoomInUp">zoomInUp</option>
84
- </optgroup>
85
- <optgroup label="Attention Seekers">
86
- <option value="spinner">Spin</option>
87
- <option value="bounce">bounce</option>
88
- <option value="flash">flash</option>
89
- <option value="pulse">pulse</option>
90
- <option value="rubberBand">rubberBand</option>
91
- <option value="shake">shake</option>
92
- <option value="swing">swing</option>
93
- <option value="tada">tada</option>
94
- <option value="wobble">wobble</option>
95
- <option value="jello">jello</option>
96
- </optgroup>
97
- <optgroup label="Flippers">
98
- <option value="flip">flip</option>
99
- <option value="flipInX">flipInX</option>
100
- <option value="flipInY">flipInY</option>
101
- </optgroup>
102
- <optgroup label="Lightspeed">
103
- <option value="lightSpeedIn">lightSpeedIn</option>
104
- </optgroup>
105
- <optgroup label="Specials">
106
- <option value="hinge">hinge</option>
107
- <option value="rollIn">rollIn</option>
108
- </optgroup>
109
- </select>
110
- </div>
111
- </div>
112
- <div class="edsai-form-control-wrapper">
113
- <label for="entry-delay"><?php _e( 'Delay (in seconds)', 'eds-animate' ); ?>:</label>
114
- <div class="edsai-form-control">
115
- <select id="entry-delay" name="entry-delay"
116
- class="half-size has-custom">
117
- <option value="0"><?php _e( 'None', 'eds-animate' ); ?></option>
118
- <option value="0.5">0.5</option>
119
- <option value="1">1.0</option>
120
- <option value="1.5">1.5</option>
121
- <option value="2">2.0</option>
122
- <option value="2.5">2.5</option>
123
- <option value="3">3.0</option>
124
- <option value="3.5">3.5</option>
125
- <option value="4">4.0</option>
126
- <option value="4.5">4.5</option>
127
- <option value="5">5.0</option>
128
- <option value="5.5">5.5</option>
129
- <option value="6">6.0</option>
130
- <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
131
- </select> <input id="entry-delay-custom"
132
- name="entry-delay-custom" class="half-size custom-field"
133
- placeholder="Custom Delay e.g. 2.7" />
134
- </div>
135
- </div>
136
- <div class="edsai-form-control-wrapper">
137
- <label for="entry-duration"><?php _e( 'Duration (in seconds)', 'eds-animate' ); ?>:</label>
138
- <div class="edsai-form-control">
139
- <select id="entry-duration" name="entry-duration"
140
- class="half-size has-custom">
141
- <option value="0.5">0.5</option>
142
- <option value="1">1.0</option>
143
- <option value="1.5">1.5</option>
144
- <option value="2">2.0</option>
145
- <option value="2.5">2.5</option>
146
- <option value="3">3.0</option>
147
- <option value="3.5">3.5</option>
148
- <option value="4">4.0</option>
149
- <option value="4.5">4.5</option>
150
- <option value="5">5.0</option>
151
- <option value="5.5">5.5</option>
152
- <option value="6">6.0</option>
153
- <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
154
- </select> <input id="entry-duration-custom"
155
- name="entry-duration-custom" class="half-size custom-field"
156
- placeholder="Custom Duration e.g. 3.2" />
157
- </div>
158
- </div>
159
- <div class="edsai-form-control-wrapper">
160
- <label for="entry-timing"><?php _e( 'Timing', 'eds-animate' ); ?>:</label>
161
- <div class="edsai-form-control">
162
- <select id="entry-timing" name="entry-timing"
163
- class="half-size">
164
- <option value="linear">linear</option>
165
- <option value="ease">ease</option>
166
- <option value="ease-in">easeIn</option>
167
- <option value="ease-out">easeOut</option>
168
- <option value="ease-in-out">easeInOut</option>
169
- <option value="cubic-bezier(0.47, 0, 0.745, 0.715)">easeInSine</option>
170
- <option value="cubic-bezier(0.39, 0.575, 0.565, 1)">easeOutSine</option>
171
- <option value="cubic-bezier(0.445, 0.05, 0.55, 0.95)">easeInOutSine</option>
172
- <option value="cubic-bezier(0.55, 0.085, 0.68, 0.53)">easeInQuad</option>
173
- <option value="cubic-bezier(0.25, 0.46, 0.45, 0.94)">easeOutQuad</option>
174
- <option value="cubic-bezier(0.455, 0.03, 0.515, 0.955)">easeInOutQuad</option>
175
- <option value="cubic-bezier(0.55, 0.055, 0.675, 0.19)">easeInCubic</option>
176
- <option value="cubic-bezier(0.215, 0.61, 0.355, 1)">easeOutCubic</option>
177
- <option value="cubic-bezier(0.645, 0.045, 0.355, 1)">easeInOutCubic</option>
178
- <option value="cubic-bezier(0.895, 0.03, 0.685, 0.22)">easeInQuart</option>
179
- <option value="cubic-bezier(0.165, 0.84, 0.44, 1)">easeOutQuart</option>
180
- <option value="cubic-bezier(0.77, 0, 0.175, 1)">easeInOutQuart</option>
181
- <option value="cubic-bezier(0.755, 0.05, 0.855, 0.06)">easeInQuint</option>
182
- <option value="cubic-bezier(0.23, 1, 0.32, 1)">easeOutQuint</option>
183
- <option value="cubic-bezier(0.86, 0, 0.07, 1)">easeInOutQuint</option>
184
- <option value="cubic-bezier(0.95, 0.05, 0.795, 0.035)">easeInExpo</option>
185
- <option value="cubic-bezier(0.19, 1, 0.22, 1)">easeOutExpo</option>
186
- <option value="cubic-bezier(1, 0, 0, 1)">easeInOutExpo</option>
187
- <option value="cubic-bezier(0.6, 0.04, 0.98, 0.335)">easeInCirc</option>
188
- <option value="cubic-bezier(0.075, 0.82, 0.165, 1)">easeOutCirc</option>
189
- <option value="cubic-bezier(0.785, 0.135, 0.15, 0.86)">easeInOutCirc</option>
190
- <option value="cubic-bezier(0.6, -0.28, 0.735, 0.045)">easeInBack</option>
191
- <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">easeOutBack</option>
192
- <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">easeInOutBack</option>
193
- </select>
194
- </div>
195
- </div>
196
- </div>
197
- <div id="tab-exit" class="edsai-tab-content edsai-exit">
198
- <div class="edsai-form-control-wrapper">
199
- <label for="exit-animation-type"><?php _e( 'Animation', 'eds-animate' ); ?>:</label>
200
- <div class="edsai-form-control">
201
- <select id="exit-animation-type" name="exit-animation-type"
202
- class="full-size">
203
- <option value="none"><?php _e( 'None', 'eds-animate' ); ?></option>
204
- <optgroup label="Bouncing Exits">
205
- <option value="bounceOut">bounceOut</option>
206
- <option value="bounceOutDown">bounceOutDown</option>
207
- <option value="bounceOutLeft">bounceOutLeft</option>
208
- <option value="bounceOutRight">bounceOutRight</option>
209
- <option value="bounceOutUp">bounceOutUp</option>
210
- </optgroup>
211
- <optgroup label="Fading Exits">
212
- <option value="fadeOut">fadeOut</option>
213
- <option value="fadeOutDown">fadeOutDown</option>
214
- <option value="fadeOutDownBig">fadeOutDownBig</option>
215
- <option value="fadeOutLeft">fadeOutLeft</option>
216
- <option value="fadeOutLeftBig">fadeOutLeftBig</option>
217
- <option value="fadeOutRight">fadeOutRight</option>
218
- <option value="fadeOutRightBig">fadeOutRightBig</option>
219
- <option value="fadeOutUp">fadeOutUp</option>
220
- <option value="fadeOutUpBig">fadeOutUpBig</option>
221
- </optgroup>
222
- <optgroup label="Rotating Exits">
223
- <option value="rotateOut">rotateOut</option>
224
- <option value="rotateOutDownLeft">rotateOutDownLeft</option>
225
- <option value="rotateOutDownRight">rotateOutDownRight</option>
226
- <option value="rotateOutUpLeft">rotateOutUpLeft</option>
227
- <option value="rotateOutUpRight">rotateOutUpRight</option>
228
- </optgroup>
229
- <optgroup label="Sliding Exits">
230
- <option value="slideOutUp">slideOutUp</option>
231
- <option value="slideOutDown">slideOutDown</option>
232
- <option value="slideOutLeft">slideOutLeft</option>
233
- <option value="slideOutRight">slideOutRight</option>
234
- </optgroup>
235
- <optgroup label="Zoom Exits">
236
- <option value="zoomOut">zoomOut</option>
237
- <option value="zoomOutDown">zoomOutDown</option>
238
- <option value="zoomOutLeft">zoomOutLeft</option>
239
- <option value="zoomOutRight">zoomOutRight</option>
240
- <option value="zoomOutUp">zoomOutUp</option>
241
- </optgroup>
242
- <optgroup label="Attention Seekers">
243
- <option value="spinner">Spin</option>
244
- <option value="bounce">bounce</option>
245
- <option value="flash">flash</option>
246
- <option value="pulse">pulse</option>
247
- <option value="rubberBand">rubberBand</option>
248
- <option value="shake">shake</option>
249
- <option value="swing">swing</option>
250
- <option value="tada">tada</option>
251
- <option value="wobble">wobble</option>
252
- <option value="jello">jello</option>
253
- </optgroup>
254
- <optgroup label="Flippers">
255
- <option value="flip">flip</option>
256
- <option value="flipOutX">flipOutX</option>
257
- <option value="flipOutY">flipOutY</option>
258
- </optgroup>
259
- <optgroup label="Lightspeed">
260
- <option value="lightSpeedOut">lightSpeedOut</option>
261
- </optgroup>
262
- <optgroup label="Specials">
263
- <option value="hinge">hinge</option>
264
- <option value="rollOut">rollOut</option>
265
- </optgroup>
266
- </select>
267
- </div>
268
- </div>
269
- <div class="edsai-form-control-wrapper">
270
- <label for="exit-delay"><?php _e( 'Delay (in seconds)', 'eds-animate' ); ?>:</label>
271
- <div class="edsai-form-control">
272
- <select id="exit-delay" name="exit-delay"
273
- class="half-size has-custom">
274
- <option value="0"><?php _e( 'None', 'eds-animate' ); ?></option>
275
- <option value="0.5">0.5</option>
276
- <option value="1">1.0</option>
277
- <option value="1.5">1.5</option>
278
- <option value="2">2.0</option>
279
- <option value="2.5">2.5</option>
280
- <option value="3">3.0</option>
281
- <option value="3.5">3.5</option>
282
- <option value="4">4.0</option>
283
- <option value="4.5">4.5</option>
284
- <option value="5">5.0</option>
285
- <option value="5.5">5.5</option>
286
- <option value="6">6.0</option>
287
- <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
288
- </select> <input id="exit-delay-custom" name="exit-delay-custom"
289
- class="half-size custom-field"
290
- placeholder="Custom Delay e.g. 2.7" />
291
- </div>
292
- </div>
293
- <div class="edsai-form-control-wrapper">
294
- <label for="exit-duration"><?php _e( 'Duration (in seconds)', 'eds-animate' ); ?>:</label>
295
- <div class="edsai-form-control">
296
- <select id="exit-duration" name="exit-duration"
297
- class="half-size has-custom">
298
- <option value="0.5">0.5</option>
299
- <option value="1">1.0</option>
300
- <option value="1.5">1.5</option>
301
- <option value="2">2.0</option>
302
- <option value="2.5">2.5</option>
303
- <option value="3">3.0</option>
304
- <option value="3.5">3.5</option>
305
- <option value="4">4.0</option>
306
- <option value="4.5">4.5</option>
307
- <option value="5">5.0</option>
308
- <option value="5.5">5.5</option>
309
- <option value="6">6.0</option>
310
- <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
311
- </select> <input id="exit-duration-custom"
312
- name="exit-duration-custom" class="half-size custom-field"
313
- placeholder="Custom Duration e.g. 3.2" />
314
- </div>
315
- </div>
316
- <div class="edsai-form-control-wrapper">
317
- <label for="exit-timing"><?php _e( 'Timing', 'eds-animate' ); ?>:</label>
318
- <div class="edsai-form-control">
319
- <select id="exit-timing" name="exit-timing"
320
- class="half-size">
321
- <option value="linear">linear</option>
322
- <option value="ease">ease</option>
323
- <option value="ease-in">easeIn</option>
324
- <option value="ease-out">easeOut</option>
325
- <option value="ease-in-out">easeInOut</option>
326
- <option value="cubic-bezier(0.47, 0, 0.745, 0.715)">easeInSine</option>
327
- <option value="cubic-bezier(0.39, 0.575, 0.565, 1)">easeOutSine</option>
328
- <option value="cubic-bezier(0.445, 0.05, 0.55, 0.95)">easeInOutSine</option>
329
- <option value="cubic-bezier(0.55, 0.085, 0.68, 0.53)">easeInQuad</option>
330
- <option value="cubic-bezier(0.25, 0.46, 0.45, 0.94)">easeOutQuad</option>
331
- <option value="cubic-bezier(0.455, 0.03, 0.515, 0.955)">easeInOutQuad</option>
332
- <option value="cubic-bezier(0.55, 0.055, 0.675, 0.19)">easeInCubic</option>
333
- <option value="cubic-bezier(0.215, 0.61, 0.355, 1)">easeOutCubic</option>
334
- <option value="cubic-bezier(0.645, 0.045, 0.355, 1)">easeInOutCubic</option>
335
- <option value="cubic-bezier(0.895, 0.03, 0.685, 0.22)">easeInQuart</option>
336
- <option value="cubic-bezier(0.165, 0.84, 0.44, 1)">easeOutQuart</option>
337
- <option value="cubic-bezier(0.77, 0, 0.175, 1)">easeInOutQuart</option>
338
- <option value="cubic-bezier(0.755, 0.05, 0.855, 0.06)">easeInQuint</option>
339
- <option value="cubic-bezier(0.23, 1, 0.32, 1)">easeOutQuint</option>
340
- <option value="cubic-bezier(0.86, 0, 0.07, 1)">easeInOutQuint</option>
341
- <option value="cubic-bezier(0.95, 0.05, 0.795, 0.035)">easeInExpo</option>
342
- <option value="cubic-bezier(0.19, 1, 0.22, 1)">easeOutExpo</option>
343
- <option value="cubic-bezier(1, 0, 0, 1)">easeInOutExpo</option>
344
- <option value="cubic-bezier(0.6, 0.04, 0.98, 0.335)">easeInCirc</option>
345
- <option value="cubic-bezier(0.075, 0.82, 0.165, 1)">easeOutCirc</option>
346
- <option value="cubic-bezier(0.785, 0.135, 0.15, 0.86)">easeInOutCirc</option>
347
- <option value="cubic-bezier(0.6, -0.28, 0.735, 0.045)">easeInBack</option>
348
- <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">easeOutBack</option>
349
- <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">easeInOutBack</option>
350
- </select>
351
- </div>
352
- </div>
353
- </div>
354
- <div id="tab-options" class="edsai-tab-content edsai-options">
355
- <div class="edsai-form-control-wrapper">
356
- <label for="options-animation-repeat"><?php _e( 'Animation Repeat', 'eds-animate' ); ?>:</label>
357
- <div class="edsai-form-control">
358
- <select id="options-animation-repeat"
359
- name="options-animation-repeat" class="half-size has-custom">
360
- <option value="1"><?php _e( 'Once', 'eds-animate' ); ?></option>
361
- <option value="2"><?php _e( 'Twice', 'eds-animate' ); ?></option>
362
- <option value="3"><?php _e( 'Thrice', 'eds-animate' ); ?></option>
363
- <option value="infinite"><?php _e( 'Infinite', 'eds-animate' ); ?></option>
364
- <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
365
- </select> <input id="options-animation-repeat-custom"
366
- name="options-animation-repeat-custom"
367
- class="half-size custom-field" placeholder="e.g. 4" />
368
- </div>
369
- </div>
370
- <div class="edsai-form-control-wrapper">
371
- <label for="options-keep"><?php _e( 'Keep Element Final State', 'eds-animate' ); ?>:</label>
372
- <div class="edsai-form-control">
373
- <input id="keep-yes" type="radio" name="options-keep"
374
- value="yes" checked> <label for="keep-yes"><?php _e( 'Yes', 'eds-animate' ); ?></label> <input
375
- id="keep-no" type="radio" name="options-keep" value="no"> <label
376
- for="keep-no"><?php _e( 'No', 'eds-animate' ); ?></label>
377
- </div>
378
- </div>
379
- <div class="edsai-form-control-wrapper">
380
- <label for="options-custom-css-class"><?php _e( 'Custom CSS Class', 'eds-animate' ); ?>:</label>
381
- <div class="edsai-form-control">
382
- <input id="options-custom-css-class"
383
- name="options-custom-css-class" class="half-size"
384
- placeholder="" value="" />
385
- </div>
386
- </div>
387
- <div class="edsai-form-control-wrapper">
388
- <label for="options-animate-on"><?php _e( 'Animate On', 'eds-animate' ); ?>:</label>
389
- <div class="edsai-form-control">
390
- <input type="radio" id="on-load" name="options-animate-on"
391
- value="load" checked> <label for="on-load"><?php _e( 'Load', 'eds-animate' ); ?></label> <input
392
- type="radio" id="on-click" name="options-animate-on"
393
- value="click"> <label for="on-click"><?php _e( 'Click', 'eds-animate' ); ?></label> <input
394
- type="radio" id="on-hover" name="options-animate-on"
395
- value="hover"> <label for="on-hover"><?php _e( 'Hover', 'eds-animate' ); ?></label> <input
396
- type="radio" id="on-scroll" name="options-animate-on"
397
- value="scroll"> <label for="on-scroll"><?php _e( 'Scroll', 'eds-animate' ); ?></label>
398
- </div>
399
- </div>
400
- <div
401
- class="edsai-form-control-wrapper options-scroll-settings-wrapper">
402
- <label for="options-scroll-offset"><?php _e( 'Scroll Offset (in %)', 'eds-animate' ); ?>:</label>
403
- <div class="edsai-form-control">
404
- <input id="options-scroll-offset" name="options-scroll-offset"
405
- class="half-size" placeholder="Custom Offset % e.g. 20.7"
406
- value="<?php echo $scroll_offset; ?>" />
407
- </div>
408
- </div>
409
- </div>
410
- </div>
411
- <div class="edsai-footer-wrapper">
412
- <div class="edsai-footer">
413
- <div class="edsai-footer-left">
414
- <?php _e( 'Powered by', 'eds-animate' ); ?> <a href="http://www.eleopard.in" target="_blank">eLEOPARD</a>
415
- | <a
416
- href="https://wordpress.org/support/view/plugin-reviews/animate-it"
417
- target="_blank"><?php _e( 'Review Plugin', 'eds-animate' ); ?></a>
418
- | <a
419
- href="http://www.downloads.eleopard.in/animate-it-documentation-wordpress"
420
- target="_blank"><?php _e( 'Documentation', 'eds-animate' ); ?></a>
421
- </div>
422
- <div class="edsai-footer-right">
423
- <button type="button" class="btn-stop-infinite-animation"
424
- style="display: none;"><?php _e( 'Stop Animation', 'eds-animate' ); ?></button>
425
- <button type="button" class="edsai-animate-it btn-animate-it"><?php _e( 'Animate It!', 'eds-animate' ); ?></button>
426
- <button type="button" class="edsai-insert btn-insert"><?php _e( 'Insert', 'eds-animate' ); ?></button>
427
- </div>
428
- </div>
429
- </div>
430
- </form>
431
- </div>
432
- </div>
433
- <script type="text/javascript">
434
- var args = top.tinymce.activeEditor.windowManager.getParams();
435
- var parentEditor = args['editor'];
436
- var url = args['plugin_url'];
437
- var jQuery = args['jquery'];
438
- </script>
439
- <script type="text/javascript"
440
- src="<?php echo plugin_dir_url(__FILE__).'../js/animo.min.js'; ?>"></script>
441
- <script type="text/javascript">
442
- ( function( $ ) {
443
-
444
- $.ready( function() {
445
-
446
- var animate_infinite = false;
447
- var total_repeat_count = 1;
448
- var element_animating = false;
449
-
450
- $.find('.custom-field').hide();
451
- $.find('.options-scroll-settings-wrapper').hide();
452
-
453
- $.find('.edsai-tab-handler').on( 'click', function( event ) {
454
-
455
- event.preventDefault();
456
-
457
- var btn = $.find( this );
458
-
459
- $.find('.edsai-tab-content').css('display','none');
460
- $.find('.edsai-tab').removeClass('edsai-tab-active');
461
-
462
- btn.parent().addClass('edsai-tab-active');
463
- $.find( btn.attr('href') ).css('display','block');
464
-
465
- } );
466
-
467
- $.find('.has-custom').on( 'change', function( event ) {
468
-
469
- var select = $.find(this);
470
-
471
- if( 'custom' == select.val() ) {
472
- select.siblings('.custom-field').show();
473
- } else {
474
- select.siblings('.custom-field').hide();
475
- }
476
-
477
- } );
478
-
479
- $.find('input[name="options-animate-on"]').on( 'change', function( event ) {
480
-
481
- var value = $.find('input[name="options-animate-on"]:checked').val();
482
-
483
- if( 'scroll' == value ) {
484
- $.find('.options-scroll-settings-wrapper').show();
485
- } else {
486
- $.find('.options-scroll-settings-wrapper').hide()
487
- $.find('input[name="options-scroll-offset"]').val('<?php echo $scroll_offset; ?>');
488
- }
489
-
490
- } );
491
-
492
- $.find('#entry-animation-type').on( 'change', function( event ) {
493
- var opt = $.find(this).val();
494
- $.find('#exit-animation-type option').attr("disabled", false);
495
- $.find('#exit-animation-type option[value="'+opt+'"]').attr("disabled", true);
496
-
497
- } );
498
-
499
- $.find('#exit-animation-type').on( 'change', function( event ) {
500
- var opt = $.find(this).val();
501
- $.find('#entry-animation-type option').attr("disabled", false);
502
- $.find('#entry-animation-type option[value="'+opt+'"]').attr("disabled", true);
503
-
504
- } );
505
-
506
-
507
- function get_settings() {
508
-
509
- var settings = {
510
- 'entry_animation_type': '',
511
- 'entry_delay': '',
512
- 'entry_duration': '',
513
- 'entry_timing': '',
514
- 'exit_animation_type': '',
515
- 'exit_delay': '',
516
- 'exit_duration': '',
517
- 'exit_timing': '',
518
- 'animation_repeat': '',
519
- 'keep':'',
520
- 'animate_on': '',
521
- 'scroll_offset': '',
522
- 'custom_css_class': ''
523
- };
524
-
525
- //reading entry animation settings
526
- var entry_animation_type = $.find('#entry-animation-type').val();
527
- if( 'none' != entry_animation_type ){
528
- settings.entry_animation_type = entry_animation_type;
529
-
530
- var entry_delay = $.find('#entry-delay').val();
531
- if( 'custom' == entry_delay ) {
532
- var entry_delay = $.find('#entry-delay-custom').val();
533
- if( ! jQuery.isNumeric( entry_delay ) ) {
534
- entry_delay = 0;
535
- }
536
- }
537
- settings.entry_delay = entry_delay;
538
-
539
- var entry_duration = $.find('#entry-duration').val();
540
- if( 'custom' == entry_duration ) {
541
- var entry_duration = $.find('#entry-duration-custom').val();
542
- if( ! jQuery.isNumeric( entry_duration ) ) {
543
- entry_duration = 0.5;
544
- }
545
- }
546
- settings.entry_duration = entry_duration;
547
- settings.entry_timing = $.find('#entry-timing').val();
548
- }
549
-
550
- //reading exit animation settings
551
- var exit_animation_type = $.find('#exit-animation-type').val();
552
- if( 'none' != exit_animation_type ){
553
-
554
- settings.exit_animation_type = exit_animation_type;
555
-
556
- var exit_delay = $.find('#exit-delay').val();
557
- if( 'custom' == exit_delay ) {
558
- var exit_delay = $.find('#exit-delay-custom').val();
559
- if( ! jQuery.isNumeric( exit_delay ) ) {
560
- exit_delay = 0;
561
- }
562
- }
563
- settings.exit_delay = exit_delay;
564
-
565
- var exit_duration = $.find('#exit-duration').val();
566
- if( 'custom' == exit_duration ) {
567
- var exit_duration = $.find('#exit-duration-custom').val();
568
-
569
- if( ! jQuery.isNumeric( exit_duration ) ) {
570
- exit_duration = 0.5;
571
- }
572
- }
573
- settings.exit_duration = exit_duration;
574
- settings.exit_timing = $.find('#exit-timing').val();
575
- }
576
-
577
- //reading other options
578
- var animation_repeat = $.find('#options-animation-repeat').val();
579
- if( 'custom' == animation_repeat ) {
580
- var animation_repeat = $.find('#options-animation-repeat-custom').val();
581
- if( ! jQuery.isNumeric( animation_repeat ) ) {
582
- animation_repeat = 1;
583
- }
584
- }
585
- settings.animation_repeat = animation_repeat;
586
-
587
- var animate_on = $.find('input[name="options-animate-on"]:checked').val();
588
- settings.animate_on = animate_on;
589
-
590
- var scroll_offset = '';
591
- if( 'scroll' == animate_on ) {
592
- scroll_offset = $.find('#options-scroll-offset').val();
593
- if( ! jQuery.isNumeric( scroll_offset ) ) {
594
- scroll_offset = '<?php echo $scroll_offset; ?>';
595
- }
596
- }
597
- settings.scroll_offset = scroll_offset;
598
- settings.custom_css_class = $.find('#options-custom-css-class').val();
599
-
600
- var keep_final_state = $.find('input[name="options-keep"]:checked').val();
601
- if( "yes" == keep_final_state ) {
602
- settings.keep = "yes";
603
- } else {
604
- settings.keep = "no";
605
- }
606
-
607
- return settings;
608
-
609
- }
610
-
611
- function reset_animation(){
612
- element_animating = false;
613
- animate_infinite = false;
614
- total_repeat_count = 1;
615
- $.find('.animateit-icon').animo("cleanse");
616
- $.find('.btn-animate-it').show();
617
- $.find('.btn-stop-infinite-animation').hide();
618
- }
619
-
620
-
621
- function eds_animate( animations, counter, iteration ) {
622
-
623
- $.find('.animateit-icon').animo( animations[ counter ].animoSettings, function() {
624
- counter++
625
- if( counter < animations.length ) {
626
- setTimeout( function(){ eds_animate( animations, counter, iteration ) }, Number(animations[counter].delay) * 1000);
627
- } else {
628
- iteration++;
629
- if( true == animate_infinite || iteration < total_repeat_count) {
630
- if(animations.length == 1) {
631
- $.find('.animateit-icon').animo("cleanse");
632
- }
633
- setTimeout( function(){ eds_animate( animations, 0, iteration ) }, Number( animations[0].delay) * 1000);
634
- } else {
635
- reset_animation();
636
- }
637
- }
638
-
639
- });
640
-
641
- }
642
-
643
- $.find('.btn-insert').on( 'click', function( event ) {
644
-
645
- var settings = get_settings();
646
-
647
- if( '' == settings.entry_animation_type
648
- && '' == settings.exit_animation_type ) {
649
- alert("Please select animation first.");
650
- return '';
651
- }
652
-
653
-
654
- var editorContent = parentEditor.selection.getContent();
655
-
656
- if( null == editorContent || "" == editorContent ) {
657
- editorContent = ' <p>Please add your content in this area.</p> ';
658
- }
659
-
660
- var short_code = [ '[edsanimate_start',
661
- ' entry_animation_type= "', settings.entry_animation_type, '"',
662
- ' entry_delay= "', settings.entry_delay, '"',
663
- ' entry_duration= "', settings.entry_duration, '"',
664
- ' entry_timing= "', settings.entry_timing, '"',
665
- ' exit_animation_type= "', settings.exit_animation_type, '"',
666
- ' exit_delay= "', settings.exit_delay, '"',
667
- ' exit_duration= "', settings.exit_duration, '"',
668
- ' exit_timing= "', settings.exit_timing, '"',
669
- ' animation_repeat= "', settings.animation_repeat, '"',
670
- ' keep= "', settings.keep, '"',
671
- ' animate_on= "', settings.animate_on, '"',
672
- ' scroll_offset= "', settings.scroll_offset, '"',
673
- ' custom_css_class= "', settings.custom_css_class, '"', ']',
674
- editorContent,
675
- '[edsanimate_end]' ]. join('');
676
-
677
- parentEditor.execCommand('mceInsertContent', false, short_code);
678
-
679
- parentEditor.windowManager.close();
680
-
681
- } );
682
-
683
- $.find('.btn-animate-it').on( 'click', function( event ) {
684
-
685
- var animations = [];
686
-
687
- var settings = get_settings();
688
-
689
- var keep_value = false;
690
-
691
- if("yes" == settings.keep ) {
692
- keep_value = true;
693
- }
694
-
695
- if( '' != settings.entry_animation_type ) {
696
-
697
- animations.push({
698
- animoSettings: {
699
- animation: settings.entry_animation_type,
700
- duration: settings.entry_duration,
701
- iterate: 1,
702
- timing: settings.entry_timing,
703
- keep: keep_value
704
- },
705
- delay: settings.entry_delay,
706
- });
707
-
708
- }
709
-
710
- if( '' != settings.exit_animation_type ) {
711
- animations.push({
712
- animoSettings: {
713
- animation: settings.exit_animation_type,
714
- duration: settings.exit_duration,
715
- iterate: 1,
716
- timing: settings.exit_timing,
717
- keep: keep_value
718
- },
719
- delay: settings.exit_delay
720
- });
721
- }
722
-
723
- if( "infinite" == settings.animation_repeat ) {
724
- animate_infinite = true;
725
- } else {
726
- animate_infinite = false;
727
- total_repeat_count = settings.animation_repeat;
728
- }
729
-
730
- if( animations.length >= 1 ) {
731
- $.find('.btn-animate-it').hide();
732
- $.find('.btn-stop-infinite-animation').show();
733
- setTimeout( function(){ eds_animate( animations, 0, 0 )}, Number( animations[0].delay ) * 1000);
734
- }
735
-
736
- } );
737
-
738
- $.find('.btn-stop-infinite-animation').on( 'click', function( event ) {
739
- reset_animation();
740
- } );
741
-
742
- } );
743
-
744
- } )( jQuery( document ) );
745
-
746
- </script>
747
- </body>
748
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ $scroll_offset = get_option ( 'eds_scroll_offset', '75' );
3
+ ?>
4
+ <!doctype html>
5
+ <html lang="en">
6
+ <head>
7
+ <meta charset="utf-8">
8
+ <title><?php _e( 'Select your Animation Style', 'eds-animate' ); ?>:</title>
9
+ <meta name="viewport"
10
+ content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
11
+ <link rel="stylesheet"
12
+ href="<?php echo plugin_dir_url(__FILE__).'../css/animate-animo.css'; ?>" />
13
+ <link rel="stylesheet"
14
+ href="<?php echo plugin_dir_url(__FILE__).'../css/style.css'; ?>" />
15
+ </head>
16
+ <body
17
+ onload="document.body.style.display='';"
18
+ dir="ltr">
19
+ <div class="modal edsai-wrapper">
20
+ <div class="edaai-body">
21
+ <div class="preview-badge">
22
+ <span id="animationSandbox">
23
+ <h1 class="site__title mega animateit-icon"></h1>
24
+ </span>
25
+ </div>
26
+ <form name="edsanimate_form" id="edsanimate_form">
27
+ <div class="edsai-form-wrapper">
28
+ <div class="edsai-tabs">
29
+ <div class="edsai-tab edsai-tab-active">
30
+ <a class="edsai-tab-handler" href="#tab-entry"><?php _e( 'Entry', 'eds-animate' ); ?></a>
31
+ </div>
32
+ <div class="edsai-tab">
33
+ <a class="edsai-tab-handler" href="#tab-exit"><?php _e( 'Exit', 'eds-animate' ); ?></a>
34
+ </div>
35
+ <div class="edsai-tab">
36
+ <a class="edsai-tab-handler" href="#tab-options"><?php _e( 'Options', 'eds-animate' ); ?></a>
37
+ </div>
38
+ </div>
39
+ <div id="tab-entry" class="edsai-tab-content edsai-entry"
40
+ style="display: block;">
41
+ <div class="edsai-form-control-wrapper">
42
+ <label for="entry-animation-type"><?php _e( 'Animation', 'eds-animate' ); ?>:</label>
43
+ <div class="edsai-form-control">
44
+ <select id="entry-animation-type" name="entry-animation-type"
45
+ class="full-size">
46
+ <option value="none"><?php _e( 'None', 'eds-animate' ); ?></option>
47
+ <optgroup label="Bouncing Entrances">
48
+ <option value="bounceIn">bounceIn</option>
49
+ <option value="bounceInDown">bounceInDown</option>
50
+ <option value="bounceInLeft">bounceInLeft</option>
51
+ <option value="bounceInRight">bounceInRight</option>
52
+ <option value="bounceInUp">bounceInUp</option>
53
+ </optgroup>
54
+ <optgroup label="Fading Entrances">
55
+ <option value="fadeIn" selected>fadeIn</option>
56
+ <option value="fadeInDown">fadeInDown</option>
57
+ <option value="fadeInDownBig">fadeInDownBig</option>
58
+ <option value="fadeInLeft">fadeInLeft</option>
59
+ <option value="fadeInLeftBig">fadeInLeftBig</option>
60
+ <option value="fadeInRight">fadeInRight</option>
61
+ <option value="fadeInRightBig">fadeInRightBig</option>
62
+ <option value="fadeInUp">fadeInUp</option>
63
+ <option value="fadeInUpBig">fadeInUpBig</option>
64
+ </optgroup>
65
+ <optgroup label="Rotating Entrances">
66
+ <option value="rotateIn">rotateIn</option>
67
+ <option value="rotateInDownLeft">rotateInDownLeft</option>
68
+ <option value="rotateInDownRight">rotateInDownRight</option>
69
+ <option value="rotateInUpLeft">rotateInUpLeft</option>
70
+ <option value="rotateInUpRight">rotateInUpRight</option>
71
+ </optgroup>
72
+ <optgroup label="Sliding Entrances">
73
+ <option value="slideInUp">slideInUp</option>
74
+ <option value="slideInDown">slideInDown</option>
75
+ <option value="slideInLeft">slideInLeft</option>
76
+ <option value="slideInRight">slideInRight</option>
77
+ </optgroup>
78
+ <optgroup label="Zoom Entrances">
79
+ <option value="zoomIn">zoomIn</option>
80
+ <option value="zoomInDown">zoomInDown</option>
81
+ <option value="zoomInLeft">zoomInLeft</option>
82
+ <option value="zoomInRight">zoomInRight</option>
83
+ <option value="zoomInUp">zoomInUp</option>
84
+ </optgroup>
85
+ <optgroup label="Attention Seekers">
86
+ <option value="spinner">Spin</option>
87
+ <option value="bounce">bounce</option>
88
+ <option value="flash">flash</option>
89
+ <option value="rubberBand">rubberBand</option>
90
+ <option value="shake">shake</option>
91
+ <option value="swing">swing</option>
92
+ <option value="tada">tada</option>
93
+ <option value="wobble">wobble</option>
94
+ <option value="jello">jello</option>
95
+ <option value="wiggle">wiggle</option>
96
+ <option value="fade">fade</option>
97
+ <option value="appear">appear</option>
98
+ <option value="grow">grow</option>
99
+ <option value="shrink">shrink</option>
100
+ <option value="push">push</option>
101
+ <option value="pop">pop</option>
102
+ <option value="float">float</option>
103
+ <option value="sink">sink</option>
104
+ <option value="forward">forward</option>
105
+ <option value="backward">backward</option>
106
+ </optgroup>
107
+ <optgroup label="Pulse">
108
+ <option value="pulse">pulse</option>
109
+ <option value="pulseGrow">pulseGrow</option>
110
+ <option value="pulseShrink">pulseShrink</option>
111
+ </optgroup>
112
+ <optgroup label="Rotate">
113
+ <option value="rotate">rotate</option>
114
+ <option value="growRotate">growRotate</option>
115
+ </optgroup>
116
+ <optgroup label="Skew">
117
+ <option value="skew">skew</option>
118
+ <option value="skewForward">skewForward</option>
119
+ <option value="skewBackward">skewBackward</option>
120
+ </optgroup>
121
+ <optgroup label="Wobble">
122
+ <option value="wobbleHorizontal">wobbleHorizontal</option>
123
+ <option value="wobbleVertical">wobbleVertical</option>
124
+ <option value="wobbleToBottomRight">wobbleToBottomRight</option>
125
+ <option value="wobbleToTopRight">wobbleToTopRight</option>
126
+ <option value="wobbleTop">wobbleTop</option>
127
+ <option value="wobbleBottom">wobbleBottom</option>
128
+ <option value="wobbleSkew">wobbleSkew</option>
129
+ </optgroup>
130
+ <optgroup label="Buzz">
131
+ <option value="buzz">buzz</option>
132
+ <option value="buzzOut">buzzOut</option>
133
+ </optgroup>
134
+ <optgroup label="Flippers">
135
+ <option value="flip">flip</option>
136
+ <option value="flipInX">flipInX</option>
137
+ <option value="flipInY">flipInY</option>
138
+ </optgroup>
139
+ <optgroup label="Lightspeed">
140
+ <option value="lightSpeedIn">lightSpeedIn</option>
141
+ </optgroup>
142
+ <optgroup label="Twirl">
143
+ <option value="twirlIn">twirlIn</option>
144
+ </optgroup>
145
+ <optgroup label="Specials">
146
+ <option value="hinge">hinge</option>
147
+ <option value="rollIn">rollIn</option>
148
+ </optgroup>
149
+ </select>
150
+ </div>
151
+ </div>
152
+ <div class="edsai-form-control-wrapper">
153
+ <label for="entry-delay"><?php _e( 'Delay (in seconds)', 'eds-animate' ); ?>:</label>
154
+ <div class="edsai-form-control">
155
+ <select id="entry-delay" name="entry-delay"
156
+ class="half-size has-custom">
157
+ <option value="0"><?php _e( 'None', 'eds-animate' ); ?></option>
158
+ <option value="0.5">0.5</option>
159
+ <option value="1">1.0</option>
160
+ <option value="1.5">1.5</option>
161
+ <option value="2">2.0</option>
162
+ <option value="2.5">2.5</option>
163
+ <option value="3">3.0</option>
164
+ <option value="3.5">3.5</option>
165
+ <option value="4">4.0</option>
166
+ <option value="4.5">4.5</option>
167
+ <option value="5">5.0</option>
168
+ <option value="5.5">5.5</option>
169
+ <option value="6">6.0</option>
170
+ <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
171
+ </select> <input id="entry-delay-custom"
172
+ name="entry-delay-custom" class="half-size custom-field"
173
+ placeholder="Custom Delay e.g. 2.7" />
174
+ </div>
175
+ </div>
176
+ <div class="edsai-form-control-wrapper">
177
+ <label for="entry-duration"><?php _e( 'Duration (in seconds)', 'eds-animate' ); ?>:</label>
178
+ <div class="edsai-form-control">
179
+ <select id="entry-duration" name="entry-duration"
180
+ class="half-size has-custom">
181
+ <option value="0.5">0.5</option>
182
+ <option value="1">1.0</option>
183
+ <option value="1.5">1.5</option>
184
+ <option value="2">2.0</option>
185
+ <option value="2.5">2.5</option>
186
+ <option value="3">3.0</option>
187
+ <option value="3.5">3.5</option>
188
+ <option value="4">4.0</option>
189
+ <option value="4.5">4.5</option>
190
+ <option value="5">5.0</option>
191
+ <option value="5.5">5.5</option>
192
+ <option value="6">6.0</option>
193
+ <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
194
+ </select> <input id="entry-duration-custom"
195
+ name="entry-duration-custom" class="half-size custom-field"
196
+ placeholder="Custom Duration e.g. 3.2" />
197
+ </div>
198
+ </div>
199
+ <div class="edsai-form-control-wrapper">
200
+ <label for="entry-timing"><?php _e( 'Timing', 'eds-animate' ); ?>:</label>
201
+ <div class="edsai-form-control">
202
+ <select id="entry-timing" name="entry-timing"
203
+ class="half-size">
204
+ <option value="linear">linear</option>
205
+ <option value="ease">ease</option>
206
+ <option value="ease-in">easeIn</option>
207
+ <option value="ease-out">easeOut</option>
208
+ <option value="ease-in-out">easeInOut</option>
209
+ <option value="cubic-bezier(0.47, 0, 0.745, 0.715)">easeInSine</option>
210
+ <option value="cubic-bezier(0.39, 0.575, 0.565, 1)">easeOutSine</option>
211
+ <option value="cubic-bezier(0.445, 0.05, 0.55, 0.95)">easeInOutSine</option>
212
+ <option value="cubic-bezier(0.55, 0.085, 0.68, 0.53)">easeInQuad</option>
213
+ <option value="cubic-bezier(0.25, 0.46, 0.45, 0.94)">easeOutQuad</option>
214
+ <option value="cubic-bezier(0.455, 0.03, 0.515, 0.955)">easeInOutQuad</option>
215
+ <option value="cubic-bezier(0.55, 0.055, 0.675, 0.19)">easeInCubic</option>
216
+ <option value="cubic-bezier(0.215, 0.61, 0.355, 1)">easeOutCubic</option>
217
+ <option value="cubic-bezier(0.645, 0.045, 0.355, 1)">easeInOutCubic</option>
218
+ <option value="cubic-bezier(0.895, 0.03, 0.685, 0.22)">easeInQuart</option>
219
+ <option value="cubic-bezier(0.165, 0.84, 0.44, 1)">easeOutQuart</option>
220
+ <option value="cubic-bezier(0.77, 0, 0.175, 1)">easeInOutQuart</option>
221
+ <option value="cubic-bezier(0.755, 0.05, 0.855, 0.06)">easeInQuint</option>
222
+ <option value="cubic-bezier(0.23, 1, 0.32, 1)">easeOutQuint</option>
223
+ <option value="cubic-bezier(0.86, 0, 0.07, 1)">easeInOutQuint</option>
224
+ <option value="cubic-bezier(0.95, 0.05, 0.795, 0.035)">easeInExpo</option>
225
+ <option value="cubic-bezier(0.19, 1, 0.22, 1)">easeOutExpo</option>
226
+ <option value="cubic-bezier(1, 0, 0, 1)">easeInOutExpo</option>
227
+ <option value="cubic-bezier(0.6, 0.04, 0.98, 0.335)">easeInCirc</option>
228
+ <option value="cubic-bezier(0.075, 0.82, 0.165, 1)">easeOutCirc</option>
229
+ <option value="cubic-bezier(0.785, 0.135, 0.15, 0.86)">easeInOutCirc</option>
230
+ <option value="cubic-bezier(0.6, -0.28, 0.735, 0.045)">easeInBack</option>
231
+ <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">easeOutBack</option>
232
+ <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">easeInOutBack</option>
233
+ </select>
234
+ </div>
235
+ </div>
236
+ </div>
237
+ <div id="tab-exit" class="edsai-tab-content edsai-exit">
238
+ <div class="edsai-form-control-wrapper">
239
+ <label for="exit-animation-type"><?php _e( 'Animation', 'eds-animate' ); ?>:</label>
240
+ <div class="edsai-form-control">
241
+ <select id="exit-animation-type" name="exit-animation-type"
242
+ class="full-size">
243
+ <option value="none"><?php _e( 'None', 'eds-animate' ); ?></option>
244
+ <optgroup label="Bouncing Exits">
245
+ <option value="bounceOut">bounceOut</option>
246
+ <option value="bounceOutDown">bounceOutDown</option>
247
+ <option value="bounceOutLeft">bounceOutLeft</option>
248
+ <option value="bounceOutRight">bounceOutRight</option>
249
+ <option value="bounceOutUp">bounceOutUp</option>
250
+ </optgroup>
251
+ <optgroup label="Fading Exits">
252
+ <option value="fadeOut">fadeOut</option>
253
+ <option value="fadeOutDown">fadeOutDown</option>
254
+ <option value="fadeOutDownBig">fadeOutDownBig</option>
255
+ <option value="fadeOutLeft">fadeOutLeft</option>
256
+ <option value="fadeOutLeftBig">fadeOutLeftBig</option>
257
+ <option value="fadeOutRight">fadeOutRight</option>
258
+ <option value="fadeOutRightBig">fadeOutRightBig</option>
259
+ <option value="fadeOutUp">fadeOutUp</option>
260
+ <option value="fadeOutUpBig">fadeOutUpBig</option>
261
+ </optgroup>
262
+ <optgroup label="Rotating Exits">
263
+ <option value="rotateOut">rotateOut</option>
264
+ <option value="rotateOutDownLeft">rotateOutDownLeft</option>
265
+ <option value="rotateOutDownRight">rotateOutDownRight</option>
266
+ <option value="rotateOutUpLeft">rotateOutUpLeft</option>
267
+ <option value="rotateOutUpRight">rotateOutUpRight</option>
268
+ </optgroup>
269
+ <optgroup label="Sliding Exits">
270
+ <option value="slideOutUp">slideOutUp</option>
271
+ <option value="slideOutDown">slideOutDown</option>
272
+ <option value="slideOutLeft">slideOutLeft</option>
273
+ <option value="slideOutRight">slideOutRight</option>
274
+ </optgroup>
275
+ <optgroup label="Zoom Exits">
276
+ <option value="zoomOut">zoomOut</option>
277
+ <option value="zoomOutDown">zoomOutDown</option>
278
+ <option value="zoomOutLeft">zoomOutLeft</option>
279
+ <option value="zoomOutRight">zoomOutRight</option>
280
+ <option value="zoomOutUp">zoomOutUp</option>
281
+ </optgroup>
282
+ <optgroup label="Attention Seekers">
283
+ <option value="spinner">Spin</option>
284
+ <option value="bounce">bounce</option>
285
+ <option value="flash">flash</option>
286
+ <option value="rubberBand">rubberBand</option>
287
+ <option value="shake">shake</option>
288
+ <option value="swing">swing</option>
289
+ <option value="tada">tada</option>
290
+ <option value="wobble">wobble</option>
291
+ <option value="jello">jello</option>
292
+ <option value="wiggle">wiggle</option>
293
+ <option value="fade">fade</option>
294
+ <option value="appear">appear</option>
295
+ <option value="grow">grow</option>
296
+ <option value="shrink">shrink</option>
297
+ <option value="push">push</option>
298
+ <option value="pop">pop</option>
299
+ <option value="float">float</option>
300
+ <option value="sink">sink</option>
301
+ <option value="forward">forward</option>
302
+ <option value="backward">backward</option>
303
+ </optgroup>
304
+ <optgroup label="Pulse">
305
+ <option value="pulse">pulse</option>
306
+ <option value="pulseGrow">pulseGrow</option>
307
+ <option value="pulseShrink">pulseShrink</option>
308
+ </optgroup>
309
+ <optgroup label="Rotate">
310
+ <option value="rotate">rotate</option>
311
+ <option value="growRotate">growRotate</option>
312
+ </optgroup>
313
+ <optgroup label="Skew">
314
+ <option value="skew">skew</option>
315
+ <option value="skewForward">skewForward</option>
316
+ <option value="skewBackward">skewBackward</option>
317
+ </optgroup>
318
+ <optgroup label="Wobble">
319
+ <option value="wobbleHorizontal">wobbleHorizontal</option>
320
+ <option value="wobbleVertical">wobbleVertical</option>
321
+ <option value="wobbleToBottomRight">wobbleToBottomRight</option>
322
+ <option value="wobbleToTopRight">wobbleToTopRight</option>
323
+ <option value="wobbleTop">wobbleTop</option>
324
+ <option value="wobbleBottom">wobbleBottom</option>
325
+ <option value="wobbleSkew">wobbleSkew</option>
326
+ </optgroup>
327
+ <optgroup label="Buzz">
328
+ <option value="buzz">buzz</option>
329
+ <option value="buzzOut">buzzOut</option>
330
+ </optgroup>
331
+ <optgroup label="Flippers">
332
+ <option value="flip">flip</option>
333
+ <option value="flipOutX">flipOutX</option>
334
+ <option value="flipOutY">flipOutY</option>
335
+ </optgroup>
336
+ <optgroup label="Lightspeed">
337
+ <option value="lightSpeedOut">lightSpeedOut</option>
338
+ </optgroup>
339
+ <optgroup label="Twirl">
340
+ <option value="twirlOut">twirlOut</option>
341
+ </optgroup>
342
+ <optgroup label="Specials">
343
+ <option value="hinge">hinge</option>
344
+ <option value="rollOut">rollOut</option>
345
+ </optgroup>
346
+ </select>
347
+ </div>
348
+ </div>
349
+ <div class="edsai-form-control-wrapper">
350
+ <label for="exit-delay"><?php _e( 'Delay (in seconds)', 'eds-animate' ); ?>:</label>
351
+ <div class="edsai-form-control">
352
+ <select id="exit-delay" name="exit-delay"
353
+ class="half-size has-custom">
354
+ <option value="0"><?php _e( 'None', 'eds-animate' ); ?></option>
355
+ <option value="0.5">0.5</option>
356
+ <option value="1">1.0</option>
357
+ <option value="1.5">1.5</option>
358
+ <option value="2">2.0</option>
359
+ <option value="2.5">2.5</option>
360
+ <option value="3">3.0</option>
361
+ <option value="3.5">3.5</option>
362
+ <option value="4">4.0</option>
363
+ <option value="4.5">4.5</option>
364
+ <option value="5">5.0</option>
365
+ <option value="5.5">5.5</option>
366
+ <option value="6">6.0</option>
367
+ <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
368
+ </select> <input id="exit-delay-custom" name="exit-delay-custom"
369
+ class="half-size custom-field"
370
+ placeholder="Custom Delay e.g. 2.7" />
371
+ </div>
372
+ </div>
373
+ <div class="edsai-form-control-wrapper">
374
+ <label for="exit-duration"><?php _e( 'Duration (in seconds)', 'eds-animate' ); ?>:</label>
375
+ <div class="edsai-form-control">
376
+ <select id="exit-duration" name="exit-duration"
377
+ class="half-size has-custom">
378
+ <option value="0.5">0.5</option>
379
+ <option value="1">1.0</option>
380
+ <option value="1.5">1.5</option>
381
+ <option value="2">2.0</option>
382
+ <option value="2.5">2.5</option>
383
+ <option value="3">3.0</option>
384
+ <option value="3.5">3.5</option>
385
+ <option value="4">4.0</option>
386
+ <option value="4.5">4.5</option>
387
+ <option value="5">5.0</option>
388
+ <option value="5.5">5.5</option>
389
+ <option value="6">6.0</option>
390
+ <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
391
+ </select> <input id="exit-duration-custom"
392
+ name="exit-duration-custom" class="half-size custom-field"
393
+ placeholder="Custom Duration e.g. 3.2" />
394
+ </div>
395
+ </div>
396
+ <div class="edsai-form-control-wrapper">
397
+ <label for="exit-timing"><?php _e( 'Timing', 'eds-animate' ); ?>:</label>
398
+ <div class="edsai-form-control">
399
+ <select id="exit-timing" name="exit-timing"
400
+ class="half-size">
401
+ <option value="linear">linear</option>
402
+ <option value="ease">ease</option>
403
+ <option value="ease-in">easeIn</option>
404
+ <option value="ease-out">easeOut</option>
405
+ <option value="ease-in-out">easeInOut</option>
406
+ <option value="cubic-bezier(0.47, 0, 0.745, 0.715)">easeInSine</option>
407
+ <option value="cubic-bezier(0.39, 0.575, 0.565, 1)">easeOutSine</option>
408
+ <option value="cubic-bezier(0.445, 0.05, 0.55, 0.95)">easeInOutSine</option>
409
+ <option value="cubic-bezier(0.55, 0.085, 0.68, 0.53)">easeInQuad</option>
410
+ <option value="cubic-bezier(0.25, 0.46, 0.45, 0.94)">easeOutQuad</option>
411
+ <option value="cubic-bezier(0.455, 0.03, 0.515, 0.955)">easeInOutQuad</option>
412
+ <option value="cubic-bezier(0.55, 0.055, 0.675, 0.19)">easeInCubic</option>
413
+ <option value="cubic-bezier(0.215, 0.61, 0.355, 1)">easeOutCubic</option>
414
+ <option value="cubic-bezier(0.645, 0.045, 0.355, 1)">easeInOutCubic</option>
415
+ <option value="cubic-bezier(0.895, 0.03, 0.685, 0.22)">easeInQuart</option>
416
+ <option value="cubic-bezier(0.165, 0.84, 0.44, 1)">easeOutQuart</option>
417
+ <option value="cubic-bezier(0.77, 0, 0.175, 1)">easeInOutQuart</option>
418
+ <option value="cubic-bezier(0.755, 0.05, 0.855, 0.06)">easeInQuint</option>
419
+ <option value="cubic-bezier(0.23, 1, 0.32, 1)">easeOutQuint</option>
420
+ <option value="cubic-bezier(0.86, 0, 0.07, 1)">easeInOutQuint</option>
421
+ <option value="cubic-bezier(0.95, 0.05, 0.795, 0.035)">easeInExpo</option>
422
+ <option value="cubic-bezier(0.19, 1, 0.22, 1)">easeOutExpo</option>
423
+ <option value="cubic-bezier(1, 0, 0, 1)">easeInOutExpo</option>
424
+ <option value="cubic-bezier(0.6, 0.04, 0.98, 0.335)">easeInCirc</option>
425
+ <option value="cubic-bezier(0.075, 0.82, 0.165, 1)">easeOutCirc</option>
426
+ <option value="cubic-bezier(0.785, 0.135, 0.15, 0.86)">easeInOutCirc</option>
427
+ <option value="cubic-bezier(0.6, -0.28, 0.735, 0.045)">easeInBack</option>
428
+ <option value="cubic-bezier(0.175, 0.885, 0.32, 1.275)">easeOutBack</option>
429
+ <option value="cubic-bezier(0.68, -0.55, 0.265, 1.55)">easeInOutBack</option>
430
+ </select>
431
+ </div>
432
+ </div>
433
+ </div>
434
+ <div id="tab-options" class="edsai-tab-content edsai-options">
435
+ <div class="edsai-form-control-wrapper">
436
+ <label for="options-animation-repeat"><?php _e( 'Animation Repeat', 'eds-animate' ); ?>:</label>
437
+ <div class="edsai-form-control">
438
+ <select id="options-animation-repeat"
439
+ name="options-animation-repeat" class="half-size has-custom">
440
+ <option value="1"><?php _e( 'Once', 'eds-animate' ); ?></option>
441
+ <option value="2"><?php _e( 'Twice', 'eds-animate' ); ?></option>
442
+ <option value="3"><?php _e( 'Thrice', 'eds-animate' ); ?></option>
443
+ <option value="infinite"><?php _e( 'Infinite', 'eds-animate' ); ?></option>
444
+ <option value="custom"><?php _e( 'Custom', 'eds-animate' ); ?></option>
445
+ </select> <input id="options-animation-repeat-custom"
446
+ name="options-animation-repeat-custom"
447
+ class="half-size custom-field" placeholder="e.g. 4" />
448
+ </div>
449
+ </div>
450
+ <div class="edsai-form-control-wrapper">
451
+ <label for="options-keep"><?php _e( 'Keep Element Final State', 'eds-animate' ); ?>:</label>
452
+ <div class="edsai-form-control">
453
+ <input id="keep-yes" type="radio" name="options-keep"
454
+ value="yes" checked> <label for="keep-yes"><?php _e( 'Yes', 'eds-animate' ); ?></label> <input
455
+ id="keep-no" type="radio" name="options-keep" value="no"> <label
456
+ for="keep-no"><?php _e( 'No', 'eds-animate' ); ?></label>
457
+ </div>
458
+ </div>
459
+ <div class="edsai-form-control-wrapper">
460
+ <label for="options-custom-css-class"><?php _e( 'Custom CSS Class', 'eds-animate' ); ?>:</label>
461
+ <div class="edsai-form-control">
462
+ <input id="options-custom-css-class"
463
+ name="options-custom-css-class" class="half-size"
464
+ placeholder="" value="" />
465
+ </div>
466
+ </div>
467
+ <div class="edsai-form-control-wrapper">
468
+ <label for="options-animate-on"><?php _e( 'Animate On', 'eds-animate' ); ?>:</label>
469
+ <div class="edsai-form-control">
470
+ <input type="radio" id="on-load" name="options-animate-on"
471
+ value="load" checked> <label for="on-load"><?php _e( 'Load', 'eds-animate' ); ?></label> <input
472
+ type="radio" id="on-click" name="options-animate-on"
473
+ value="click"> <label for="on-click"><?php _e( 'Click', 'eds-animate' ); ?></label> <input
474
+ type="radio" id="on-hover" name="options-animate-on"
475
+ value="hover"> <label for="on-hover"><?php _e( 'Hover', 'eds-animate' ); ?></label> <input
476
+ type="radio" id="on-scroll" name="options-animate-on"
477
+ value="scroll"> <label for="on-scroll"><?php _e( 'Scroll', 'eds-animate' ); ?></label>
478
+ </div>
479
+ </div>
480
+ <div
481
+ class="edsai-form-control-wrapper options-scroll-settings-wrapper">
482
+ <label for="options-scroll-offset"><?php _e( 'Scroll Offset (in %)', 'eds-animate' ); ?>:</label>
483
+ <div class="edsai-form-control">
484
+ <input id="options-scroll-offset" name="options-scroll-offset"
485
+ class="half-size" placeholder="Custom Offset % e.g. 20.7"
486
+ value="<?php echo $scroll_offset; ?>" />
487
+ </div>
488
+ </div>
489
+ </div>
490
+ </div>
491
+ <div class="edsai-footer-wrapper">
492
+ <div class="edsai-footer">
493
+ <div class="edsai-footer-left">
494
+ <?php _e( 'Powered by', 'eds-animate' ); ?> <a href="http://www.eleopard.in" target="_blank">eLEOPARD</a>
495
+ | <a
496
+ href="https://wordpress.org/support/view/plugin-reviews/animate-it"
497
+ target="_blank"><?php _e( 'Review Plugin', 'eds-animate' ); ?></a>
498
+ | <a
499
+ href="http://www.downloads.eleopard.in/animate-it-documentation-wordpress"
500
+ target="_blank"><?php _e( 'Documentation', 'eds-animate' ); ?></a>
501
+ </div>
502
+ <div class="edsai-footer-right">
503
+ <button type="button" class="btn-stop-infinite-animation"
504
+ style="display: none;"><?php _e( 'Stop Animation', 'eds-animate' ); ?></button>
505
+ <button type="button" class="edsai-animate-it btn-animate-it"><?php _e( 'Animate It!', 'eds-animate' ); ?></button>
506
+ <button type="button" class="edsai-insert btn-insert"><?php _e( 'Insert', 'eds-animate' ); ?></button>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </form>
511
+ </div>
512
+ </div>
513
+ <script type="text/javascript">
514
+ var args = top.tinymce.activeEditor.windowManager.getParams();
515
+ var parentEditor = args['editor'];
516
+ var url = args['plugin_url'];
517
+ var jQuery = args['jquery'];
518
+ </script>
519
+ <script type="text/javascript"
520
+ src="<?php echo plugin_dir_url(__FILE__).'../js/animo.min.js'; ?>"></script>
521
+ <script type="text/javascript">
522
+ ( function( $ ) {
523
+
524
+ $.ready( function() {
525
+
526
+ var animate_infinite = false;
527
+ var total_repeat_count = 1;
528
+ var element_animating = false;
529
+
530
+ $.find('.custom-field').hide();
531
+ $.find('.options-scroll-settings-wrapper').hide();
532
+
533
+ $.find('.edsai-tab-handler').on( 'click', function( event ) {
534
+
535
+ event.preventDefault();
536
+
537
+ var btn = $.find( this );
538
+
539
+ $.find('.edsai-tab-content').css('display','none');
540
+ $.find('.edsai-tab').removeClass('edsai-tab-active');
541
+
542
+ btn.parent().addClass('edsai-tab-active');
543
+ $.find( btn.attr('href') ).css('display','block');
544
+
545
+ } );
546
+
547
+ $.find('.has-custom').on( 'change', function( event ) {
548
+
549
+ var select = $.find(this);
550
+
551
+ if( 'custom' == select.val() ) {
552
+ select.siblings('.custom-field').show();
553
+ } else {
554
+ select.siblings('.custom-field').hide();
555
+ }
556
+
557
+ } );
558
+
559
+ $.find('input[name="options-animate-on"]').on( 'change', function( event ) {
560
+
561
+ var value = $.find('input[name="options-animate-on"]:checked').val();
562
+
563
+ if( 'scroll' == value ) {
564
+ $.find('.options-scroll-settings-wrapper').show();
565
+ } else {
566
+ $.find('.options-scroll-settings-wrapper').hide()
567
+ $.find('input[name="options-scroll-offset"]').val('<?php echo $scroll_offset; ?>');
568
+ }
569
+
570
+ } );
571
+
572
+ $.find('#entry-animation-type').on( 'change', function( event ) {
573
+ var opt = $.find(this).val();
574
+ $.find('#exit-animation-type option').attr("disabled", false);
575
+ $.find('#exit-animation-type option[value="'+opt+'"]').attr("disabled", true);
576
+
577
+ } );
578
+
579
+ $.find('#exit-animation-type').on( 'change', function( event ) {
580
+ var opt = $.find(this).val();
581
+ $.find('#entry-animation-type option').attr("disabled", false);
582
+ $.find('#entry-animation-type option[value="'+opt+'"]').attr("disabled", true);
583
+
584
+ } );
585
+
586
+
587
+ function get_settings() {
588
+
589
+ var settings = {
590
+ 'entry_animation_type': '',
591
+ 'entry_delay': '',
592
+ 'entry_duration': '',
593
+ 'entry_timing': '',
594
+ 'exit_animation_type': '',
595
+ 'exit_delay': '',
596
+ 'exit_duration': '',
597
+ 'exit_timing': '',
598
+ 'animation_repeat': '',
599
+ 'keep':'',
600
+ 'animate_on': '',
601
+ 'scroll_offset': '',
602
+ 'custom_css_class': ''
603
+ };
604
+
605
+ //reading entry animation settings
606
+ var entry_animation_type = $.find('#entry-animation-type').val();
607
+ if( 'none' != entry_animation_type ){
608
+ settings.entry_animation_type = entry_animation_type;
609
+
610
+ var entry_delay = $.find('#entry-delay').val();
611
+ if( 'custom' == entry_delay ) {
612
+ var entry_delay = $.find('#entry-delay-custom').val();
613
+ if( ! jQuery.isNumeric( entry_delay ) ) {
614
+ entry_delay = 0;
615
+ }
616
+ }
617
+ settings.entry_delay = entry_delay;
618
+
619
+ var entry_duration = $.find('#entry-duration').val();
620
+ if( 'custom' == entry_duration ) {
621
+ var entry_duration = $.find('#entry-duration-custom').val();
622
+ if( ! jQuery.isNumeric( entry_duration ) ) {
623
+ entry_duration = 0.5;
624
+ }
625
+ }
626
+ settings.entry_duration = entry_duration;
627
+ settings.entry_timing = $.find('#entry-timing').val();
628
+ }
629
+
630
+ //reading exit animation settings
631
+ var exit_animation_type = $.find('#exit-animation-type').val();
632
+ if( 'none' != exit_animation_type ){
633
+
634
+ settings.exit_animation_type = exit_animation_type;
635
+
636
+ var exit_delay = $.find('#exit-delay').val();
637
+ if( 'custom' == exit_delay ) {
638
+ var exit_delay = $.find('#exit-delay-custom').val();
639
+ if( ! jQuery.isNumeric( exit_delay ) ) {
640
+ exit_delay = 0;
641
+ }
642
+ }
643
+ settings.exit_delay = exit_delay;
644
+
645
+ var exit_duration = $.find('#exit-duration').val();
646
+ if( 'custom' == exit_duration ) {
647
+ var exit_duration = $.find('#exit-duration-custom').val();
648
+
649
+ if( ! jQuery.isNumeric( exit_duration ) ) {
650
+ exit_duration = 0.5;
651
+ }
652
+ }
653
+ settings.exit_duration = exit_duration;
654
+ settings.exit_timing = $.find('#exit-timing').val();
655
+ }
656
+
657
+ //reading other options
658
+ var animation_repeat = $.find('#options-animation-repeat').val();
659
+ if( 'custom' == animation_repeat ) {
660
+ var animation_repeat = $.find('#options-animation-repeat-custom').val();
661
+ if( ! jQuery.isNumeric( animation_repeat ) ) {
662
+ animation_repeat = 1;
663
+ }
664
+ }
665
+ settings.animation_repeat = animation_repeat;
666
+
667
+ var animate_on = $.find('input[name="options-animate-on"]:checked').val();
668
+ settings.animate_on = animate_on;
669
+
670
+ var scroll_offset = '';
671
+ if( 'scroll' == animate_on ) {
672
+ scroll_offset = $.find('#options-scroll-offset').val();
673
+ if( ! jQuery.isNumeric( scroll_offset ) ) {
674
+ scroll_offset = '<?php echo $scroll_offset; ?>';
675
+ }
676
+ }
677
+ settings.scroll_offset = scroll_offset;
678
+ settings.custom_css_class = $.find('#options-custom-css-class').val();
679
+
680
+ var keep_final_state = $.find('input[name="options-keep"]:checked').val();
681
+ if( "yes" == keep_final_state ) {
682
+ settings.keep = "yes";
683
+ } else {
684
+ settings.keep = "no";
685
+ }
686
+
687
+ return settings;
688
+
689
+ }
690
+
691
+ function reset_animation(){
692
+ element_animating = false;
693
+ animate_infinite = false;
694
+ total_repeat_count = 1;
695
+ $.find('.animateit-icon').animo("cleanse");
696
+ $.find('.btn-animate-it').show();
697
+ $.find('.btn-stop-infinite-animation').hide();
698
+ }
699
+
700
+
701
+ function eds_animate( animations, counter, iteration ) {
702
+
703
+ $.find('.animateit-icon').animo( animations[ counter ].animoSettings, function() {
704
+ counter++
705
+ if( counter < animations.length ) {
706
+ setTimeout( function(){ eds_animate( animations, counter, iteration ) }, Number(animations[counter].delay) * 1000);
707
+ } else {
708
+ iteration++;
709
+ if( true == animate_infinite || iteration < total_repeat_count) {
710
+ if(animations.length == 1) {
711
+ $.find('.animateit-icon').animo("cleanse");
712
+ }
713
+ setTimeout( function(){ eds_animate( animations, 0, iteration ) }, Number( animations[0].delay) * 1000);
714
+ } else {
715
+ reset_animation();
716
+ }
717
+ }
718
+
719
+ });
720
+
721
+ }
722
+
723
+ $.find('.btn-insert').on( 'click', function( event ) {
724
+
725
+ var settings = get_settings();
726
+
727
+ if( '' == settings.entry_animation_type
728
+ && '' == settings.exit_animation_type ) {
729
+ alert("Please select animation first.");
730
+ return '';
731
+ }
732
+
733
+
734
+ var editorContent = parentEditor.selection.getContent();
735
+
736
+ if( null == editorContent || "" == editorContent ) {
737
+ editorContent = ' <p>Please add your content in this area.</p> ';
738
+ }
739
+
740
+ var short_code = [ '[edsanimate_start',
741
+ ' entry_animation_type= "', settings.entry_animation_type, '"',
742
+ ' entry_delay= "', settings.entry_delay, '"',
743
+ ' entry_duration= "', settings.entry_duration, '"',
744
+ ' entry_timing= "', settings.entry_timing, '"',
745
+ ' exit_animation_type= "', settings.exit_animation_type, '"',
746
+ ' exit_delay= "', settings.exit_delay, '"',
747
+ ' exit_duration= "', settings.exit_duration, '"',
748
+ ' exit_timing= "', settings.exit_timing, '"',
749
+ ' animation_repeat= "', settings.animation_repeat, '"',
750
+ ' keep= "', settings.keep, '"',
751
+ ' animate_on= "', settings.animate_on, '"',
752
+ ' scroll_offset= "', settings.scroll_offset, '"',
753
+ ' custom_css_class= "', settings.custom_css_class, '"', ']',
754
+ editorContent,
755
+ '[edsanimate_end]' ]. join('');
756
+
757
+ parentEditor.execCommand('mceInsertContent', false, short_code);
758
+
759
+ parentEditor.windowManager.close();
760
+
761
+ } );
762
+
763
+ $.find('.btn-animate-it').on( 'click', function( event ) {
764
+
765
+ var animations = [];
766
+
767
+ var settings = get_settings();
768
+
769
+ var keep_value = false;
770
+
771
+ if("yes" == settings.keep ) {
772
+ keep_value = true;
773
+ }
774
+
775
+ if( '' != settings.entry_animation_type ) {
776
+
777
+ animations.push({
778
+ animoSettings: {
779
+ animation: settings.entry_animation_type,
780
+ duration: settings.entry_duration,
781
+ iterate: 1,
782
+ timing: settings.entry_timing,
783
+ keep: keep_value
784
+ },
785
+ delay: settings.entry_delay,
786
+ });
787
+
788
+ }
789
+
790
+ if( '' != settings.exit_animation_type ) {
791
+ animations.push({
792
+ animoSettings: {
793
+ animation: settings.exit_animation_type,
794
+ duration: settings.exit_duration,
795
+ iterate: 1,
796
+ timing: settings.exit_timing,
797
+ keep: keep_value
798
+ },
799
+ delay: settings.exit_delay
800
+ });
801
+ }
802
+
803
+ if( "infinite" == settings.animation_repeat ) {
804
+ animate_infinite = true;
805
+ } else {
806
+ animate_infinite = false;
807
+ total_repeat_count = settings.animation_repeat;
808
+ }
809
+
810
+ if( animations.length >= 1 ) {
811
+ $.find('.btn-animate-it').hide();
812
+ $.find('.btn-stop-infinite-animation').show();
813
+ setTimeout( function(){ eds_animate( animations, 0, 0 )}, Number( animations[0].delay ) * 1000);
814
+ }
815
+
816
+ } );
817
+
818
+ $.find('.btn-stop-infinite-animation').on( 'click', function( event ) {
819
+ reset_animation();
820
+ } );
821
+
822
+ } );
823
+
824
+ } )( jQuery( document ) );
825
+
826
+ </script>
827
+ </body>
828
+ </html>
assets/js/edsanimate.js CHANGED
@@ -1,106 +1,106 @@
1
- (function($) {
2
- $(document).ready(function(){
3
- var animationStyleClasses = ["animated","infinite", "bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedIn", "lightSpeedOut", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp"];
4
- var delayClasses = ["delay1", "delay2", "delay3", "delay4", "delay5", "delay6", "delay7", "delay8", "delay9", "delay10", "delay11", "delay12"];
5
- var durationClasses = ["duration1", "duration2", "duration3", "duration4", "duration5", "duration6", "duration7", "duration8", "duration9", "duration10", "duration11", "duration12", "duration13", "duration14", "duration15", "duration16", "duration17", "duration18", "duration19", "duration20"];
6
- var scrollOffset = edsanimate_options.offset;
7
-
8
- $('.eds-animation-paused').removeClass('eds-animation-paused');
9
-
10
- $('.eds-on-scroll').each(function(){
11
- var $module = $(this);
12
-
13
- var classesToAdd = " eds-scroll-visible ";
14
-
15
- $module.removeClass(function(index, className){
16
- var removeClassList = "";
17
- var classList = className.trim().split(/\s+/);
18
- $.each(classList, function(index, value){
19
- if(($.inArray(value, animationStyleClasses)!==-1)
20
- || ($.inArray(value, delayClasses)!==-1)
21
- || ($.inArray(value, durationClasses)!==-1))
22
- removeClassList += " " + value;
23
- });
24
-
25
- classesToAdd += removeClassList;
26
- return removeClassList;
27
- });
28
-
29
- $module.addClass("eds-scroll-hidden");
30
-
31
- $module.edsViewportChecker({
32
- classToAdd: classesToAdd,
33
- offset: scrollOffset
34
- });
35
-
36
- });
37
-
38
- $('.eds-on-click').each(function(){
39
- var $module = $(this);
40
-
41
- var classesToAdd = " ";
42
-
43
- $module.removeClass(function(index, className){
44
- var removeClassList = "";
45
- var classList = className.trim().split(/\s+/);
46
- $.each(classList, function(index, value){
47
- if(($.inArray(value, animationStyleClasses)!==-1)
48
- || ($.inArray(value, delayClasses)!==-1)
49
- || ($.inArray(value, durationClasses)!==-1))
50
- removeClassList += " " + value;
51
- });
52
-
53
- classesToAdd += removeClassList;
54
- return removeClassList;
55
- });
56
-
57
- $module.click(function (){
58
- $(this).removeClass(classesToAdd).addClass(classesToAdd).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
59
- $(this).removeClass(classesToAdd);
60
- });
61
- });
62
-
63
- });
64
-
65
- $('.eds-on-hover').each(function(){
66
- var $module = $(this);
67
-
68
- var classesToAdd = " ";
69
-
70
- $module.removeClass(function(index, className){
71
- var removeClassList = "";
72
- var classList = className.trim().split(/\s+/);
73
- $.each(classList, function(index, value){
74
- if(($.inArray(value, animationStyleClasses)!==-1)
75
- || ($.inArray(value, delayClasses)!==-1)
76
- || ($.inArray(value, durationClasses)!==-1))
77
- removeClassList += " " + value;
78
- });
79
-
80
- classesToAdd += removeClassList;
81
- return removeClassList;
82
- });
83
-
84
- var hovered = false;
85
- $module.hover(
86
- function (){
87
- hovered = true;
88
- $(this).removeClass(classesToAdd).addClass(classesToAdd).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
89
- $(this).removeClass(classesToAdd);
90
- });
91
- },
92
- function (){
93
- hovered = false;
94
- $(this).on('webkitAnimationIteration oanimationiteration msAnimationiteration animationiteration', function(e){
95
- if(!hovered){
96
- $(this).removeClass(classesToAdd);
97
- }
98
- });
99
- }
100
- );
101
-
102
- });
103
-
104
-
105
- });
106
  })(jQuery);
1
+ (function($) {
2
+ $(document).ready(function(){
3
+ var animationStyleClasses = ["animated","infinite", "bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "flip", "flipInX", "flipInY", "flipOutX", "flipOutY", "lightSpeedIn", "lightSpeedOut", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "hinge", "rollIn", "rollOut", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp", "wiggle", "fade", "appear", "spinner", "twirlIn", "twirlOut", "grow", "shrink", "pulseGrow", "pulseShrink", "push", "pop", "rotate", "growRotate", "float", "sink", "skew", "skewForward", "skewBackward", "wobbleHorizontal", "wobbleVertical", "wobbleToBottomRight", "wobbleToTopRight", "wobbleTop", "wobbleBottom", "wobbleSkew", "buzz", "buzzOut", "forward", "backward"];
4
+ var delayClasses = ["delay1", "delay2", "delay3", "delay4", "delay5", "delay6", "delay7", "delay8", "delay9", "delay10", "delay11", "delay12"];
5
+ var durationClasses = ["duration1", "duration2", "duration3", "duration4", "duration5", "duration6", "duration7", "duration8", "duration9", "duration10", "duration11", "duration12", "duration13", "duration14", "duration15", "duration16", "duration17", "duration18", "duration19", "duration20"];
6
+ var scrollOffset = edsanimate_options.offset;
7
+
8
+ $('.eds-animation-paused').removeClass('eds-animation-paused');
9
+
10
+ $('.eds-on-scroll').each(function(){
11
+ var $module = $(this);
12
+
13
+ var classesToAdd = " eds-scroll-visible ";
14
+
15
+ $module.removeClass(function(index, className){
16
+ var removeClassList = "";
17
+ var classList = className.trim().split(/\s+/);
18
+ $.each(classList, function(index, value){
19
+ if(($.inArray(value, animationStyleClasses)!==-1)
20
+ || ($.inArray(value, delayClasses)!==-1)
21
+ || ($.inArray(value, durationClasses)!==-1))
22
+ removeClassList += " " + value;
23
+ });
24
+
25
+ classesToAdd += removeClassList;
26
+ return removeClassList;
27
+ });
28
+
29
+ $module.addClass("eds-scroll-hidden");
30
+
31
+ $module.edsViewportChecker({
32
+ classToAdd: classesToAdd,
33
+ offset: scrollOffset
34
+ });
35
+
36
+ });
37
+
38
+ $('.eds-on-click').each(function(){
39
+ var $module = $(this);
40
+
41
+ var classesToAdd = " ";
42
+
43
+ $module.removeClass(function(index, className){
44
+ var removeClassList = "";
45
+ var classList = className.trim().split(/\s+/);
46
+ $.each(classList, function(index, value){
47
+ if(($.inArray(value, animationStyleClasses)!==-1)
48
+ || ($.inArray(value, delayClasses)!==-1)
49
+ || ($.inArray(value, durationClasses)!==-1))
50
+ removeClassList += " " + value;
51
+ });
52
+
53
+ classesToAdd += removeClassList;
54
+ return removeClassList;
55
+ });
56
+
57
+ $module.click(function (){
58
+ $(this).removeClass(classesToAdd).addClass(classesToAdd).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
59
+ $(this).removeClass(classesToAdd);
60
+ });
61
+ });
62
+
63
+ });
64
+
65
+ $('.eds-on-hover').each(function(){
66
+ var $module = $(this);
67
+
68
+ var classesToAdd = " ";
69
+
70
+ $module.removeClass(function(index, className){
71
+ var removeClassList = "";
72
+ var classList = className.trim().split(/\s+/);
73
+ $.each(classList, function(index, value){
74
+ if(($.inArray(value, animationStyleClasses)!==-1)
75
+ || ($.inArray(value, delayClasses)!==-1)
76
+ || ($.inArray(value, durationClasses)!==-1))
77
+ removeClassList += " " + value;
78
+ });
79
+
80
+ classesToAdd += removeClassList;
81
+ return removeClassList;
82
+ });
83
+
84
+ var hovered = false;
85
+ $module.hover(
86
+ function (){
87
+ hovered = true;
88
+ $(this).removeClass(classesToAdd).addClass(classesToAdd).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
89
+ $(this).removeClass(classesToAdd);
90
+ });
91
+ },
92
+ function (){
93
+ hovered = false;
94
+ $(this).on('webkitAnimationIteration oanimationiteration msAnimationiteration animationiteration', function(e){
95
+ if(!hovered){
96
+ $(this).removeClass(classesToAdd);
97
+ }
98
+ });
99
+ }
100
+ );
101
+
102
+ });
103
+
104
+
105
+ });
106
  })(jQuery);
edsanimate.php CHANGED
@@ -5,7 +5,7 @@
5
  * Domain Path: /lang
6
  * Plugin URI: http://www.eleopard.in
7
  * Description: Add cool CSS3 animations to your content.
8
- * Version: 2.2.1
9
  * Author: eLEOPARD Design Studios
10
  * Author URI: http://www.eleopard.in
11
  * License: GNU General Public License version 2 or later; see LICENSE.txt
@@ -42,7 +42,7 @@ class EDS_Animate {
42
  "rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft",
43
  "rotateInUpRight","slideInUp","slideInDown","slideInLeft","slideInRight",
44
  "zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","flipInX",
45
- "flipInY","lightSpeedIn","rollIn");
46
 
47
  public function __construct( $file_loc ) {
48
 
@@ -157,6 +157,13 @@ class EDS_Animate {
157
 
158
  if( $installed_version != $eds_animate_it_version ) {
159
  /* Code Block to be used for next plugin upgrade */
 
 
 
 
 
 
 
160
  }
161
  }
162
 
@@ -186,8 +193,9 @@ class EDS_Animate {
186
  update_option('eds_enable_on_tab', $_REQUEST['eds_enable_on_tab']);
187
  $ok=true;
188
  }
189
- update_option('eds_custom_css', esc_textarea(isset($_REQUEST['eds_custom_css'])?$_REQUEST['eds_custom_css']:''));
190
-
 
191
 
192
  if($ok){?>
193
  <div id="message" class="updated fade">
@@ -282,8 +290,7 @@ class EDS_Animate {
282
  <?php
283
  }
284
 
285
- function detect_device()
286
- {
287
  static $device_type = null;
288
 
289
  if(!$device_type)
@@ -296,23 +303,21 @@ class EDS_Animate {
296
  }
297
 
298
  function add_eds_script_and_css() {
299
-
 
 
300
  $device_type = $this->detect_device();
301
 
302
  $enable_smart_phone = get_option('eds_enable_on_phone');
303
- $enable_tablet = get_option('eds_enable_on_tab');
304
-
305
 
306
  $enable= ($device_type=='phone' && intval($enable_smart_phone))
307
  || ($device_type =='tablet' && intval($enable_tablet))
308
  || ($device_type =='computer');
309
 
310
- if($enable):
311
 
312
- wp_register_style( 'edsanimate-animo-css',plugins_url( '/assets/css/animate-animo.css', self::$abs_file ));
313
-
314
- //Custom CSS//
315
- $custom_css = get_option('eds_custom_css');
316
 
317
  wp_register_script( 'edsanimate-animo-script',plugins_url( '/assets/js/animo.min.js', self::$abs_file ), array('jquery'), '1.0.3', true);
318
 
@@ -334,16 +339,28 @@ class EDS_Animate {
334
 
335
  //Enqueuing style sheets
336
  wp_enqueue_style( 'edsanimate-animo-css' );
337
- wp_add_inline_style( 'edsanimate-animo-css', $custom_css );
338
 
339
  //Enqueuing javascripts
340
  wp_enqueue_script( 'edsanimate-animo-script');
341
  wp_enqueue_script( 'edsanimate-throttle-debounce-script' );
342
  wp_enqueue_script( 'viewportcheck-script');
343
  wp_enqueue_script( 'edsanimate-script');
344
- wp_enqueue_script( 'edsanimate-site-script');
 
 
 
 
 
 
 
 
 
 
 
 
 
345
 
346
- endif;
347
  }
348
 
349
  function edsanimate_handler( $attributes, $content = null ) {
@@ -518,6 +535,6 @@ if( !defined( 'WPINC' ) ) {
518
 
519
  global $eds_animate_it_version;
520
 
521
- $eds_animate_it_version = '2.1.0';
522
 
523
  new EDS_Animate( __FILE__ );
5
  * Domain Path: /lang
6
  * Plugin URI: http://www.eleopard.in
7
  * Description: Add cool CSS3 animations to your content.
8
+ * Version: 2.3.0
9
  * Author: eLEOPARD Design Studios
10
  * Author URI: http://www.eleopard.in
11
  * License: GNU General Public License version 2 or later; see LICENSE.txt
42
  "rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft",
43
  "rotateInUpRight","slideInUp","slideInDown","slideInLeft","slideInRight",
44
  "zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp","flipInX",
45
+ "flipInY","lightSpeedIn","rollIn","twirlIn");
46
 
47
  public function __construct( $file_loc ) {
48
 
157
 
158
  if( $installed_version != $eds_animate_it_version ) {
159
  /* Code Block to be used for next plugin upgrade */
160
+ /*For version 2.3.0 code to add custom css file is added.*/
161
+ $custom_css = get_option('eds_custom_css');
162
+ if($custom_css !== false && $custom_css != "" ){
163
+ file_put_contents( plugin_dir_path( self::$abs_file ) . "assets/css/custom.css", $custom_css);
164
+ }
165
+ update_option( 'eds_animate_it_version', $eds_animate_it_version );
166
+
167
  }
168
  }
169
 
193
  update_option('eds_enable_on_tab', $_REQUEST['eds_enable_on_tab']);
194
  $ok=true;
195
  }
196
+ $custom_css = esc_textarea(isset($_REQUEST['eds_custom_css'])?$_REQUEST['eds_custom_css']:'');
197
+ update_option('eds_custom_css', $custom_css);
198
+ file_put_contents( plugin_dir_path( self::$abs_file ) . "assets/css/custom.css", $custom_css);
199
 
200
  if($ok){?>
201
  <div id="message" class="updated fade">
290
  <?php
291
  }
292
 
293
+ function detect_device() {
 
294
  static $device_type = null;
295
 
296
  if(!$device_type)
303
  }
304
 
305
  function add_eds_script_and_css() {
306
+ //Custom CSS//
307
+ $custom_css = get_option('eds_custom_css');
308
+
309
  $device_type = $this->detect_device();
310
 
311
  $enable_smart_phone = get_option('eds_enable_on_phone');
312
+ $enable_tablet = get_option('eds_enable_on_tab');
 
313
 
314
  $enable= ($device_type=='phone' && intval($enable_smart_phone))
315
  || ($device_type =='tablet' && intval($enable_tablet))
316
  || ($device_type =='computer');
317
 
318
+ if($enable) {
319
 
320
+ wp_register_style( 'edsanimate-animo-css',plugins_url( '/assets/css/animate-animo.css', self::$abs_file ));
 
 
 
321
 
322
  wp_register_script( 'edsanimate-animo-script',plugins_url( '/assets/js/animo.min.js', self::$abs_file ), array('jquery'), '1.0.3', true);
323
 
339
 
340
  //Enqueuing style sheets
341
  wp_enqueue_style( 'edsanimate-animo-css' );
342
+ wp_add_inline_style( 'edsanimate-animo-css', $custom_css );
343
 
344
  //Enqueuing javascripts
345
  wp_enqueue_script( 'edsanimate-animo-script');
346
  wp_enqueue_script( 'edsanimate-throttle-debounce-script' );
347
  wp_enqueue_script( 'viewportcheck-script');
348
  wp_enqueue_script( 'edsanimate-script');
349
+ wp_enqueue_script( 'edsanimate-site-script');
350
+ } else {
351
+ if( file_exists( plugin_dir_path( self::$abs_file ) . "assets/css/custom.css" ) ) {
352
+ wp_register_style( 'edsanimate-custom-css',plugins_url( '/assets/css/custom.css', self::$abs_file ));
353
+ wp_enqueue_style( 'edsanimate-custom-css' );
354
+ } else {
355
+ if( $custom_css != null && trim($custom_css) != "" ) {
356
+ wp_register_style( 'edsanimate-blank-css',plugins_url( '/assets/css/blank.css', self::$abs_file ) );
357
+ wp_enqueue_style( 'edsanimate-blank-css' );
358
+ wp_add_inline_style( 'edsanimate-blank-css', $custom_css );
359
+ }
360
+ }
361
+ }
362
+
363
 
 
364
  }
365
 
366
  function edsanimate_handler( $attributes, $content = null ) {
535
 
536
  global $eds_animate_it_version;
537
 
538
+ $eds_animate_it_version = '2.3.0';
539
 
540
  new EDS_Animate( __FILE__ );
legal.txt CHANGED
@@ -10,4 +10,5 @@ http://labs.bigroomstudios.com/libraries/animo-js
10
  http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html
11
 
12
  CSS
13
- http://daneden.github.io/animate.css/
 
10
  http://benalman.com/code/projects/jquery-throttle-debounce/docs/files/jquery-ba-throttle-debounce-js.html
11
 
12
  CSS
13
+ http://daneden.github.io/animate.css/
14
+ http://ianlunn.github.io/Hover/
readme.txt CHANGED
@@ -2,8 +2,8 @@
2
  Contributors: eleopard
3
  Tags: css3 animation, animate.css, jquery, on scroll animation, delay, infinite, entry exit, iteration
4
  Requires at least: 3.9
5
- Tested up to: 4.9.1
6
- Stable tag: 2.2.1
7
  License: GNU General Public License version 2 or later
8
  License URI: http://www.gnu.org/copyleft/gpl.html
9
 
@@ -82,6 +82,10 @@ Add duration class ( duration1 to duration20 ) along with the other classes. or
82
 
83
  == Changelog ==
84
 
 
 
 
 
85
  = Version 2.2.1 =
86
  * Bug fixes for chrome 61+ version
87
 
2
  Contributors: eleopard
3
  Tags: css3 animation, animate.css, jquery, on scroll animation, delay, infinite, entry exit, iteration
4
  Requires at least: 3.9
5
+ Tested up to: 4.9.2
6
+ Stable tag: 2.3.0
7
  License: GNU General Public License version 2 or later
8
  License URI: http://www.gnu.org/copyleft/gpl.html
9
 
82
 
83
  == Changelog ==
84
 
85
+ = Version 2.3.0 =
86
+ * Added new CSS Animations. Thanks to http://ianlunn.github.io/Hover/
87
+ * Added support for loading custom CSS even if the animations are disabled on tablet or mobile devices.
88
+
89
  = Version 2.2.1 =
90
  * Bug fixes for chrome 61+ version
91